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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
js实现滑动滑块验证登录
Jul 24 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
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP goto语句用法实例
2019/08/06 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python列表与元组详解实例
2013/11/01 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python实现KNN邻近算法
2021/01/28 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python获取引用对象的个数方式
2019/12/20 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
房地产还款计划书
2014/01/10 职场文书
授权委托书
2014/09/17 职场文书
财务负责人岗位职责
2015/02/03 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
使用python绘制横竖条形图
2022/04/21 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server