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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JS写滑稽笑脸运动效果
May 28 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
餐饮业的创业计划书范文
2013/12/26 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
单位委托书范本
2014/04/04 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年老干部工作总结
2015/04/23 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL