# 国际化

## 新增应用语言

以新增日语为例。

![i18n](../_media/term_i18n.svg)

1. 添加语言包本地文件，`ja` 为日语的语言代码，支持翻译的语言列表参考 [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05)，运行下面命令后会生成 `src/locales/ja/messages.json` 文件。

   ```bash
   npm run add-locale ja
   ```

2. 提取代码中需要翻译的字段，即 `<Trans>message</Trans>`、`` intl.formatMessage({ id: 'message `` 中 `message` 字段，运行下面命令后 `src/locales/ja/messages.json' }) 将会出现提取后的字段配置。

   ```bash
   npm run extract
   ```

   你将看到如下信息：

   ```bash
    Catalog statistics:
    ┌─────────────┬─────────────┬─────────┐
    │ Language    │ Total count │ Missing │
    ├─────────────┼─────────────┼─────────┤
    │ en (source) │     52      │    -    │
    │ ja          │     52      │   52    │
    │ zh          │     52      │    0    │
    └─────────────┴─────────────┴─────────┘
   ```

3. 与此同时，我们在 `src/utils/config.js` 新增相关配置。

   ```javascript
   {
       ...
       i18n: {
           languages: [
               ...
               {
                   key:'ja',
                   title: '日本語',
                   flag: '/japanese.svg',
               },
           ],
       },
   }
   ```

   >  路由相关效果，配置后 `npm run start` 重启后生效。

4. 使用内置的命令进行自动翻译，在 `src/locales/ja/messages.json` 中将会看到翻译后的配置。

   ```bash
   npm run trans:only
   ```

   你将看到如下信息：

   ```bash
   start: en -> ja
   ...
   youdao: en -> ja: Unpublished -> 未発表
   youdao: en -> ja: Update -> 更新
   youdao: en -> ja: Update User -> ユーザーの更新
   youdao: en -> ja: Username -> 名
   ...
   All translations have been completed.
   ```

   > `npm run trans` 将会依次执行 `npm run extract` 和 `npm run trans:only`

5. 最后，可以在 `src/locales/ja/messages.json` 中对翻译不准确的的字段进行调整。启动开发模式 `npm run start`，打开 [http://localhost:7000/ja/login](http://localhost:7000/ja/login)，你将看到日语版本的应用。