react国际化化插件react-i18n-auto使用详解


Posted in Javascript onMarch 31, 2020

react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下

安装

npm install react-i18n-auto --save-dev

第一步:添加babel插件配置(.babelrc添加方式)

{
 "plugins": [
  "@babel/plugin-transform-runtime",
  "react-i18n-auto",
  "..."
 ]
 }

第二步:添加自动化配置 i18n.config.js

const generator = require('react-i18n-auto/generator')
const path = require('path')

generator.gen({

 excluded: /node_modules|output/, //排除文件选项(默认为:/node_modules/)

 src: path.resolve(__dirname, './code'), //源文件目录(必选)

 outputPath: path.resolve(__dirname, './output'), //国际化配置输出目录(必选)

})

然后运行 node i18n.config.js 自动生成配置文件,将localePolyfill.js,localeUtils.js,语言包文件自动生成到outputPath目录下

localePolyfill.js暴露全局方法 $AI, $$AI 和全局变量 LOCALE (语言包),LOCALE_VERSION (语言包版本)

更多配置请移步至react-i18n-auto github主页

第三步:修改webpack配置,为每一个entry入口添加localePolyfill.js

// webpack.config.js
const path = require('path')
module.exports = {
 entry: {
 main: [
  path.resolve(__dirname, './output/localePolyfill.js'),
  path.resolve(__dirname, './src/index.js')
 ],
 ...
 },

第四步:修改当前语言(中文无需加载语言包)

import React from 'react'
import en_US from '../output/en_US/locale'
import localeUtils from '../output/localeUtils'

localeUtils.locale(en_US)
// lolale.js
module.exports = {
 'I_2gaaanh': 'Student',
 'I_2aq02r1': 'Teacher'
}

第五步:唯一的额外的工作,动态加载语言包时(如果语言包已提前加载则无需此操作)

修改前

// const.js 
export default Const = {
 SelectOptions:[
 {
  name:'学生',
  value:'student',
 },
 {
  name:'教师',
  value:'teacher',
 },
 ]
}
// app.js
import React from 'react'
import Const from './const'

export default class App extends React.Component {
 render () {
 return <select>
  {
  Const.selectOptions.map(item => {
   return <option key={item.value} value={item.value}>
    {item.name}
   </option>
  })
  }
 </select>
 }
}

由于const为常量,当语言包LOCALE更新时,const并不会得到更新,需要手动调用$AI,类似的情况都需要手动更新

修改后

import React from 'react'
import Const from './const'

export default class App extends React.Component {
 render () {
 return <select>
  {
  Const.selectOptions.map(item => {
   return <option key={item.value} value={item.value}>
   {$AI(item.$_name, item.name)} {/*唯一需要修改的地方*/}
   </option>
  })
  }
 </select>
 }
}
// 编译后的const.js
// 所有的中文对应的字段,自动添加$_前缀,值为对应中文的uuidKey

export default Const = {
 selectOptions: [{
 name: '学生',
 $_name: "I_2gaaanh",
 value: 'student'
 }, {
 name: '教师',
 $_name: "I_2aq02r1",
 value: 'teacher'
 }]
};

ps :通过代理getter,或提前加载语言包则可跳过步骤5,具体方法可自行尝试

结束

编译前后代码对照,不污染源码,无痕开发

import React from 'react'
export default class App extends React.Component {
 render () {
 return <div>
  <header>这是标题</header>
  <div title='这是提示文字'>
  <p>这是内容</p>
  </div>
  <footer>{this.state.title}</footer>
 </div>
 }
}
import React from 'react'
export default class App extends React.Component {
 render () {
 return <div>
  <header>{$AI('I_5wtgbv1', '这是标题')}</header>
  <div title={$AI('I_7reuhi4', '这是提示文字')}>
  <p>{$AI('I_4ximl4b', '这是内容')}</p>
  </div>
  <footer>{this.state.title}</footer>
 </div>
 }
}

到此这篇关于react国际化化插件react-i18n-auto使用详解的文章就介绍到这了,更多相关react i18n auto 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 #Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
You might like
缅甸的咖啡简史
2021/03/04 咖啡文化
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
python中matplotlib条件背景颜色的实现
2019/09/02 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
艺术爱好者的自我评价分享
2013/10/08 职场文书
志愿者服务感言
2014/02/27 职场文书
生日寄语大全
2014/04/08 职场文书
优秀团队申报材料
2014/12/26 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
美丽心灵观后感
2015/06/01 职场文书