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 相关文章推荐
表格单元格交错着色实现思路及代码
Apr 01 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Vue通过provide inject实现组件通信
Sep 03 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 递归效率分析
2009/11/24 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
详解jQuery中的事件
2016/12/14 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
详解vue 组件注册
2020/11/20 Vue.js
VUE实现吸底按钮
2021/03/04 Vue.js
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python3抓取中文网页的方法
2015/07/28 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python中常用的os操作汇总
2020/11/05 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
学生打架检讨书大全
2014/01/23 职场文书
投标服务承诺书
2014/05/28 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers