locale.json语言文件

locale.json 将所有语言的翻译，都保存到同一个 JSON 文件中

• 把不同语言的区域码设置为第一层的 key 值
• 第二层则为具体页面占位符的 key 值

  {
  "en-us": {
    "intl.appName": "React App Pro",
    "intl.dashboard": "Dashboard",
    "intl.analysis": "Analysis",
  },
  "zh-cn": {
    "intl.appName": "React 中后台应用",
    "intl.dashboard": "仪表盘",
    "intl.analysis": "分析页",
  }
  }

多语言版本切换

在同一个应用中，支持用户切换不同的语言版本

• 在运行时会用到所有不同的语言
• 将所有语言的翻译，都存在同一个 JSON 文件中
• 将不同的翻译分别存在各自的语言文件中
  • 例如 en-us.json， zh-cn.json
  • 统一管理不同平台之间语言文件的 key 值

en-us.json

{
  "appName": "React App Pro",
  "siderMenu_dashboard": "Dashboard",
  "siderMenu_analysis": "Analysis",
}

zh-cn.json

{
    "appName": "React 中后台应用",
    "siderMenu_dashboard": "仪表盘",
    "siderMenu_analysis": "分析页",
}

不要把所有的语言翻译都存在一个文件中，会导致 JSON文件太大
JSON文件拆分

自动加载多语言

module.exports = {
  'en-US': {
    locale: 'en-us',
  },
  'zh-CN': {
    locale: 'zh-cn',
  },
  localhost: {
    locale: 'zh-cn',
  },
};

多语言版本构建

将同一个应用打包成不同语言的版本，分别发布到不同的生产环境中，但在应用内部不支持多语言切换。

• 将不同的翻译分别存在各自的语言文件中。
• 首先将语言文件 import 到 webpack.config.js 中，
• 然后通过 webpack 提供的 webpack.DefinePlugin 注入到应用的一个全局常量

const localeMessages = require('./src/i18n/locale.json');
new webpack.DefinePlugin({
  'process.env.BUILD_LOCALE_MESSAGES': JSON.stringify(localeMessages),
})

构建多个不同语言版本，引入一个应用构建时的配置文件，称为 buildConfig.js

module.exports = {
  'PROD-US': {
    locale: 'en-us',
  },
  'PROD-CN': {
    locale: 'zh-cn',
  },
  localhost: {
    locale: 'zh-cn',
  },
};

并在 package.json 中分别配置不同语言版本的构建命令

"scripts": {
  "build:PROD-US": "cross-env NODE_ENV=production BUILD_DOMAIN=PROD-US webpack -p --progress --colors",
  "build:PROD-CN": "cross-env NODE_ENV=production BUILD_DOMAIN=PROD-CN webpack -p --progress --colors",
}

在 webpack 的配置中读取到当前要构建的目标版本语言，然后再据此去匹配相应的语言文件，如 en-us.json

const BUILD_DOMAIN = process.env.BUILD_DOMAIN || 'localhost';
const config = buildConfig[BUILD_DOMAIN];
const localeMessages = require(`./src/locales/${config.locale}.json`);
new webpack.DefinePlugin({
  'process.env.BUILD_LOCALE_MESSAGES': JSON.stringify(localeMessages),
})