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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
详解javascript中的事件处理
Nov 06 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 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
Windows下的PHP5.0详解
2006/11/18 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python 统计代码行数简单实例
2017/05/04 Python
python如何获取服务器硬件信息
2017/05/11 Python
python实现日常记账本小程序
2018/03/10 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Python编写单元测试代码实例
2020/09/10 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
晚归检讨书
2014/02/19 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
新郎接新娘保证书
2015/05/08 职场文书
入党转正介绍人意见
2015/06/03 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers