Internationalization

Introduce

When an application needs to be internationalized, it usually needs to be divided into the following three parts:

• Internationalization of front-end applications
• Internationalization during function execution in the function module
• Internationalization of module title in the manifest file

The internationalization translation files of the above three parts should be placed in a locales folder, which should be located in the root directory of the application code and organized according to the following directory structure:

├── locales
    ├── en
    │   └── index.json
    ├── index.js
    └── zh
        └── index.json

tip

When packaging and building, you need to package the locales folder into the application package, and you need to add -c locales to the build-package command of package.json

$ giteeteam-apps build --prod -c locales

Front-end internationalization configuration

1. Installation dependencies:

$ yarn add @alienfast/i18next-loader -D
$ yarn add rosetta

2. Configure webpack loader

rules: [
    {
        test: /locales/,
        loader: "@alienfast/i18next-loader",
        options: {
            include: ["**/index.json"]
        }
    },
],

3. Usage

For use with rosetta, please refer to:I18n Demo

Function internationalization

Internationalization can be achieved by using the i18n api from @giteeteam/apps-team-api in the function

import { i18n } from '@giteeteam/apps-team-api'

export const run = async () => {
    console.log(i18n.t('key'));
    return i18n.t('profile.name');
}

Can refer to：I18n Demo

Manifest internationalization

Only the title field in the manifest file can be internationalized.

For example, in the manifest file, there is the following configuration:

manifest.yml

modules:
  itemPanel:
    - key: test-manager-test-detail
      resource: main
      title: panel.title
      loadType: Micro
      route: /panelModule

The panel.title of the title corresponds to the translation in locales/en/index.json

locales/en/index.json

{
  "panel": {
    "title": "test-manager"
  }
}