您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

react国际化化插件react-i18n-auto使用详解

时间:2020-4-1 11:42:38

  核心提示:react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下安装?1npm install react-i18n-auto --save-devnpm install...

react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下

安装

1
npm install react-i18n-auto --save-dev

第一步:添加babel插件配置(.babelrc添加方式)

1
2
3
4
5
6
7
{
"plugins": [
 "@babel/plugin-transform-runtime",
 "react-i18n-auto",
 "..."
]
}

第二步:添加自动化配置 i18n.config.js

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
8
9
10
// webpack.config.js
const path = require('path')
module.exports = {
 entry: {
 main: [
  path.resolve(__dirname, './output/localePolyfill.js'),
  path.resolve(__dirname, './src/index.js')
 ],
 ...
 },

第四步:修改当前语言(中文无需加载语言包)

1
2
3
4
5
6
7
8
9
10
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'
}

第五步:唯一的额外的工作,动态加载语言包时(如果语言包已提前加载则无需此操作)

修改前

1
2
3
4
5
6
7
8
9
10
11
12
13
// const.js
export default Const = {
 SelectOptions:[
 {
  name:'学生',
  value:'student',
 },
 {
  name:'教师',
  value:'teacher',
 },
 ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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,类似的情况都需要手动更新

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 编译后的const.js
// 所有的中文对应的字段,自动添加$_前缀,值为对应中文的uuidKey
 
export default Const = {
 selectOptions: [{
 name: '学生',
 $_name: "I_2gaaanh",
 value: 'student'
 }, {
 name: '教师',
 $_name: "I_2aq02r1",
 value: 'teacher'
 }]
};

ps :通过代理getter,或提前加载语言包则可跳过步骤5,具体方法可自行尝试

结束

编译前后代码对照,不污染源码,无痕开发

1
2
3
4
5
6
7
8
9
10
11
12
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>
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
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使用详解的文章就介绍到这了

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号