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 相关文章推荐
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
小程序中使用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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php生成随机密码的三种方法小结
2010/09/04 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python绘图实现显示中文
2019/12/04 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
后勤人员岗位职责
2013/12/17 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2014年纠风工作总结
2014/12/08 职场文书
美术教师个人总结
2015/02/06 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
法制主题班会教案
2015/08/13 职场文书
中学生运动会广播稿
2015/08/19 职场文书
初中班长竞选稿
2015/11/20 职场文书