React前端项目国际化

背景

最近公司项目作国际化，须要至少支持英语和中文两种语言。但愿在改动最小的状况下完成任务，尽可能避免二次开发。通过调研+实际验证，成功达到目标，写这篇文章记录下个人实现过程。

工具

react-intl

公司项目用的React，所以初始选择的React-intl。这个库提供React组件和API来格式化日期、数字和字符串，还有一些其余的翻译操做。这已是一个比较成熟且使用量很大的开源库。

使用react-intl作国际化，流程：

一、 在app引入localprovider，注入国际化函数；

二、 把component的中须要翻译的文案用formattedMessage包装，props和state用高阶组件formattedMessage包装，formattedMessage必须有id（惟一）和defaultMessage两个属性

react-intl-universal

因为react-intl使用还须要区分须要翻译的文案是存在于state仍是props中，这样不方便使用脚原本扫描识别代码中的文案，并加以包装。所以，调研了另一个项目react-intl-universal，react-intl-universal的使用要简单得多。

使用步骤

• 一、安装完成后，准备两个json文件 中文 zh.json：

{
  "t1": "查看",
  "t2": "修改",
  "t3": "更新时间：{date}, by"
}
复制代码

英语 en.json：

{
  "t1": "view",
  "t2": "modify",
  "t3": "Update Time：{date}, by "
}
复制代码

• 二、生成locale并引入

import intl from 'react-intl-universal';
import EN from '../locale/en.json';
import CH from '../locale/zh.json'; 

const locales = {
  en_US: EN,
  zh_CN: CH
};
const language = localStorage.getItem('lang_type') || 'zh_CN';
intl
  .init({
    warningHandler: (msg, detail) => { //注意该函数开发环境有，打包后就没有了
      console.log(`${msg} ${detail}`);
    },
    currentLocale: language, 
    locales
  })
复制代码

• 三、文案替换

import intl from 'react-intl-universal';
<button>{intl.get('t1').d('查看')}<button>
<button>{intl.get('t2').d('修改')}<button>
<div>{intl.get('t3', {date: `2019-05-24 16:39:25`})}</div>  //带参数
复制代码

结果展现

效率工具

步骤3可使用插件完成，推荐工具i18n-ast。其余工具都是使用正则匹配来替换代码中的文案，老是会有一些错漏的状况。但i18n-ast是经过编译原理识别底层语法树来作的替换工做，结果较为准备，大大节省了工做量

完整示例。