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 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！