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是經過編譯原理識別底層語法樹來作的替換工做，結果較爲準備，大大節省了工做量

完整示例。