## React 国际化插件 react-i18n-auto 使用详解
React-i18n-auto 是一个专为React应用设计的国际化插件，它简化了中文国际化的自动化流程，使得在快速迭代开发中处理多语言支持变得更加便捷。本文将详细介绍如何使用这个插件，并提供示例代码帮助理解和应用。
### 1. 安装与配置
你需要通过npm安装react-i18n-auto：
```bash
npm install react-i18n-auto --save-dev
```
接下来，需要在`.babelrc`文件中添加插件配置：
```json
{
"plugins": [
"@babel/plugin-transform-runtime",
"react-i18n-auto",
"..."
]
}
```
### 2. 自动化配置
创建一个`i18n.config.js`文件，用于设置自动化生成语言包的参数：
```javascript
const generator = require('react-i18n-auto/generator');
const path = require('path');
generator.gen({
excluded: /node_modules|output/,
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`（语言包版本）。
### 3. 修改Webpack配置
在`webpack.config.js`中，为每个entry入口添加`localePolyfill.js`：
```javascript
const path = require('path');
module.exports = {
entry: {
main: [
path.resolve(__dirname, './output/localePolyfill.js'),
path.resolve(__dirname, './src/index.js'),
],
...
},
};
```
### 4. 设置当前语言
例如，要切换到英文环境，可以这样导入并设置：
```javascript
import React from 'react';
import en_US from '../output/en_US/locale';
import localeUtils from '../output/localeUtils';
localeUtils.locale(en_US);
```
### 5. 动态加载语言包
在某些情况下，你可能需要动态加载语言包。以下是一个例子，展示了如何处理语言包更新：
**修改前**
```javascript
// 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) => (
<option key={item.value} value={item.value}>
{item.name}
</option>
))}
</select>
);
}
}
```
**修改后**
为了确保语言包更新后常量`Const`也能随之更新，我们需要使用`$AI`进行手动更新：
```javascript
import React from 'react';
import Const from './const';
export default class App extends React.Component {
render() {
return (
<select>
{Const.SelectOptions.map((it) => (
<option key={it.value} value={it.value}>
{$AI(it.name)}
</option>
))}
</select>
);
}
}
```
通过这种方式，即使语言包更新，组件也能正确显示新的翻译。
### 6. 更多配置与功能
更多关于react-i18n-auto的配置和高级用法，你可以查阅其GitHub主页，那里有详细的文档和示例。
总结，react-i18n-auto 提供了一种自动化处理React应用国际化的方法，减少了手动维护和更新语言包的工作。通过配置Babel插件、Webpack入口、设置当前语言以及处理动态加载，你可以轻松地实现多语言支持，提高开发效率。
