# globalization

## Add language

Take Japanese as an example.

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

1. Add a language pack local file, `ja` is the Japanese language code, and a list of languages ​​that support translation [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05), the `src/locales/ja/messages.json` file will be generated after running the following command.

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

2. Extract the fields in the code that need to be translated, ie `<Trans>?message</Trans>`, `` i18n.t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration.

   ```bash 
   npm run extract
   ```

   You will see the following information:

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

3. At the same time, we have added the relevant configuration in `src/utils/config.js`.

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

   > Routing related effects, after the configuration `npm run start` takes effect after restart.

4. Use the built-in commands for automatic translation. You will see the translated configuration in `src/locales/ja/messages.json`.

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

   You will see the following information:

   ```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` will execute `npm run extract` and `npm run trans:only` in order.

5. Finally, you can adjust the inaccurate fields in `src/locales/ja/messages.json`. Start the development mode `npm run start`, open [http://localhost:7000/ja/login](http://localhost:7000/ja/login) and you will see the Japanese version of the app.