摘要：本國際化方案僅針對技術棧，且不會涉及服務端國際化內容。引入多語言環境的數據雖然我只用到了文本翻譯的功能，以為就不需要加載這些數據，但后來發現這是必須的步驟。

前言

最近新接了一個項目，從0開始做，需要做多語言的國際化，今天搞了一下，基本達到了想要的效果， 在這里簡單分享下：

背景
國際化方案
國際化方案概述
前端國際化詳解、舉例
國際化資源文件管理
項目之間、開發者與翻譯者之間的協作
國際化規范附錄
擴展閱讀

國際化方案概述
國際化是一個看似簡單，實則非常復雜的領域，實際進行國際化工作時，大家會發現它往往會涉及很多內容：

前端國際化
服務端國際化
國際化資源文件管理
項目之間、開發者與翻譯者之間如何協作
而且，國際化方案往往與具體的技術棧是綁定的。

本國際化方案僅針對 React 技術棧，且不會涉及服務端國際化內容。

前端國際化詳解、舉例
國際化的核心步驟有兩步：

創建資源文件，以 key-value 方式存儲
加載資源文件，將頁面上 key 的內容替換為相關 value

一些探索
也說不上是探索吧，就Google了一波， GitHub 上找了一個比較成熟的庫如下：

react-i18next

react-intl

react-intl-universa

接下來一一介紹一下如何使用

react-i18next

安裝

npm install i18next react-i18next --save

引入App.js

import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";

初始化

const lng = "en";
i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: {
          Welcome: "Welcome to React",
        },
      },
      zh: {
        translation: {
          Welcome: "歡迎進入react",
        },
      },
    },
    lng: lng,
    fallbackLng: lng,

    interpolation: {
      escapeValue: false,
    },
  });

實際使用結果

function App() {
  const { t } = useTranslation();
  return (
    

      
{t("Welcome")}
    
  );
}

export default App;

封裝后的成果：

// ...
import i18n from "@src/i18n";
// xxx component
console.log("i18n來一發:", i18n.t("INVALID_ORDER"));
render() { 
  // ...
   {i18n.t("INVALID_ORDER")} 
}

react-intl
背景：

用于國際化 React 組件，提供 React 組件和 API 來格式化日期，數字，字符串（包括單復數和翻譯）。

react-intl庫是業界很受歡迎的庫之一。 react-intl用包裹組件的形式裝飾你的React.Component，動態注入國際化消息，以便能夠動態加載語言環境數據，并且無需重新加載頁面

安裝：

npm install react-intl --save

載入語言環境數據。
React Intl 依賴這些數據來支持單復數和相對時間格式化的功能。

// Main.js
import { addLocaleData } from "react-intl"; /* react-intl imports */
import en from "react-intl/locale-data/en";
import zh from "react-intl/locale-data/zh";
addLocaleData([...en, ...zh]);  // 引入多語言環境的數據  

雖然我只用到了文本翻譯的功能，以為就不需要加載這些數據，但后來發現這是必須的步驟。不然會報錯：

[React Intl] Missing locale data for locale: "zh". Using default locale: "en" as fallback.

使用組件包裹需要實現國際化的根組件，這個組件樹之后就會在配置的i18n上下文中了。
由于項目中用到了react-hot-loader，根組件 Main被包裹了，并且是從多帶帶的一個文件 import 了 Main 組件。

//app.js
import { AppContainer } from "react-hot-loader"
import Main from "./components/Main"
//... ...
const render = Component => {
    ReactDOM.render(
        
            
        ,
        document.getElementById("app")
    )
}
render(Main);

于是直接在 Main.js 中使用組件。把它加到 render()返回節點的最外層就行了。

// Main.js
import { addLocaleData, IntlProvider } from "react-intl"; /* react-intl imports */
render(){
    return (
        
          //··· ···
        
    )
}

添加多種語言對應的文本。
比如要支持中英文，為了方便之后維護，可以新建兩個文件：

locale目錄下新建
// en_US.js
const en_US = {
    hello: "Hello!"，
    //... ...
}
export default en_US;

// zh_CN.js
const zh_CN = {
    hello: "你好！"，
    //... ...
}
export default zh_CN;

然后在Main.js中引入這兩個變量。

// Main.js
import zh_CN from "../locale/zh_CN"     // import defined messages in Chinese
import en_US from "../locale/en_US"     // import defined messages in English

全局配置當前的語言，和相對應的文本。
即配置組件的兩個屬性locale和messages。

// Main.js
render(){
    let messages = {}
    messages["en"] = en_US;
    messages["zh"] = zh_CN;
    return (
        
            //··· ···
        
    )
}
 

這樣基本配置就完成了，可以通過改變 this.state.lang的值來改變頁面語言。

// Main.js
/**
 * Change language
 * @param {String} lang new language
 */
changeLanguage(lang) {
    this.setState({
        lang: lang
    })
}

接下來，添加翻譯的文本到頁面中
基本只需要使用到一個組件：。這個組件默認生成一個，內容是翻譯后的文本，也就是 messages中對應字段的值。

在需要添加國際化文本的組件中，引入FormattedMessage組件。

import { FormattedMessage  } from "react-intl"; /* react-intl imports */
//... ...

當前語言為en時，生成結果：

Hello!

到這里，react-intl基本的國際化就實現了。

尾聲
編寫規范
必須填寫 defaultMessage，并將 defaultMessage 作為中文翻譯
id 不得重復
在使用 intl.formatMessage() 時，必須使用 defineMessages，預定義消息
擴展閱讀
react-intl
react-intl-corner-cases
react-intl-universal
背景：

由阿里巴巴推出的react國際化庫

這個庫最好地方在于使用簡單方便，侵入性低

安裝
使用npm安裝

npm install react-intl-universal --save

初始化
在初始頁面，進行該庫的初始化，配置語言包，json文件根據需要支持幾種語言來決定，下面的圖片中僅支持中英文

image.png

于項目入口文件中配置國際化

import intl from "react-intl-universal";

// locale data
const locales = {
  "en-US": require("./locales/en-US.json"),
  "zh-CN": require("./locales/zh-CN.json"),
};

class App extends Component {

  state = {initDone: false}

  componentDidMount() {
    this.loadLocales();
  }

  loadLocales() {
    // react-intl-universal 是單例模式, 只應該實例化一次
    intl.init({
      currentLocale: "en-US", // TODO: determine locale here
      locales,
    })
    .then(() => {
    this.setState({initDone: true});
    });
  }

  render() {
    return (
      this.state.initDone &&
      

        {intl.get("SIMPLE")}
      
    );
  }

}

語言配置文件可以是json或者js，json格式如下：

英語配置文件 ./locales/en-US.json

{
    "SIMPLE": "Simple Sentence",
    "LANG_TYPE": "paas-us",
    "INPUT_MOBILE": "Mobile Number",
    "HELLO": "Hello, {name}. Welcome to {where}!"
}

中文配置文件 ./locales/zh-CN.json

{
    "SIMPLE": "簡單的句子",
    "LANG_TYPE": "paas-cn",
    "INPUT_MOBILE": "手機號",
    "HELLO": "你好, {name}。歡迎來到{where}!"
}

調用
在剛才的初始化代碼中，render函數里面已經進行了調用了。在整個項目的其他地方，由于已經進行了初始化了，所以可以直接調用了。調用的例子如下：

import intl from "react-intl-universal";

class Test extends Component {
  render() {
    return (
      

        {intl.get("INPUT_MOBILE")}
      
    );
  }

}

切換
再來看一下初始化函數

intl.init({
    currentLocale: "en-US", // TODO: determine locale here
    locales,
})

初始化的時候，除了直接指定語言外，還可以由函數determineLocale根據以下配置進行指定：

Url中的query參數
cookie中的參數
瀏覽器的當前語言(當沒有配置query參數和cookie參數時)
這些配置的生效如下面代碼所示：

let currentLocale = intl.determineLocale({
  urlLocaleKey: "lang",
  cookieLocaleKey: "lang"
});

intl.init({
    currentLocale, // determine locale here
    locales,
})

那么，我們可以利用如下方式進行切換：當選擇相應語言時，觸發回調函數，在函數內，修改url或者cookie，然后進行頁面刷新，重新初始化，即可以切換語言了。

下面我給出一個根據cookie切換的例子：

handleClick = (lang) => {
    Cookies.set("lang", lang, { expires: "1Y" });
    window.location.reload(true); }

進階
react-intl-universal庫在語言處理上，還有很多其他功能，如：

帶HTML標簽的HTML 文本
變量
單復數形式
貨幣
日期

html中引用資源包里的文字

a.純文字,使用intl.get()

 {intl.get("SIMPLE")} 

b.帶html模板的文字,使用intl.getHTML()方法

例如資源包里是這樣定義的

{ 
   "SIMPLE": "This is HTML" 
}

引用時需使用getHTML()方法獲取文字

{intl.getHTML("SIMPLE")}

數字形式和千分位分隔符
下例中的變量為num，給它標記為plural后，它的值只能為數字。當num值為0時，顯示"no photos."；當值為1時，顯示"one photo."；當值為其他數字比如25000時，顯示“25,000 photos.”，這里的"#"表示給num的值添加千分位分隔符后顯示

{ 
   "PHOTO": "You have {num, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}" 
}

引用結果如下：

intl.get("PHOTO", {num:0}); // "You have no photos."
intl.get("PHOTO", {num:1}); // "You have one photo."
intl.get("PHOTO", {num:1000000}); // "You have 1,000,000 photos."

顯示貨幣格式
具體語法為{變量名, 類型, 格式化}，下例中變量名為"price"，它的類型是number，"USD"表示在值前面加上美元符號($)

{ 
   "SALE_PRICE": "The price is {price, number, USD}" 
}

引用及顯示結果如下：

intl.get("SALE_PRICE", {price:123456.78}); // The price is $123,456.78

顯示日期
語法同上：{變量名, 類型, 格式化}，當類型為"date"時，格式化有以下幾個選項：short,medium,long,full,也可不格式化

{
  "SALE_START": "Sale begins {start, date}",
  "SALE_END": "Sale ends {end, date, long}"
}

引用及顯示：

intl.get("SALE_START", {start:new Date()}); // Sale begins 4/19/2017
intl.get("SALE_END", {end:new Date()}); // Sale ends April 19, 2017

配置默認message
當遇到比如因拼寫錯誤導致無法匹配到資源包里的文字時，可以事先配置默認的message，這時當無法匹配的資源包時會顯示默認message

//"defaultMessage()"可簡寫為"d()"
intl.get("not-exist-key").defaultMessage("沒有找到這句話");

同理亦可配置帶html模板的默認message

intl.getHTML("not-exist-key").d(
沒有找到這句話
)

帶變量的message
資源包里的配置如下

{
    "HELLO": "Hello, {name}. Welcome to {where}!" 
}

在html中引用時

 intl.get("HELLO", {name:"banana", where:"China"}) 
顯示的結果為：Hello, banana. Welcome to China!

尾聲
到此react-intl-universal基本的使用方法介紹完畢了，如果以上達不到你的需求請前往git翻看更多readme文檔和api文檔。

git地址：https://github.com/alibaba/re...

antd/antd-mobile 國際化方案
LocaleProvider國際化
組件 LocaleProvider 用于全局配置國際化文案

https://ant.design/components...

為組件內建文案提供統一的國際化支持

使用

LocaleProvider 使用 React 的 context 特性，只需在應用外圍包裹一次即可全局生效。



import { LocaleProvider } from "antd";
import zh_CN from "antd/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale("zh-cn");
...

return ;

提供了英語，中文，俄語，法語，德語等多種語言支持，所有語言包可以在 這里 找到。

注意：如果你需要使用 UMD 版的 dist 文件，應該引入 antd/dist/antd-with-locales.js，同時引入 moment 對應的 locale，然后按以下方式使用：

const { LocaleProvider, locales } = window.antd;

...

return ;

到此今天的國際化分享大全就結束了，我個人感覺還是react-intl-universal比較好用，如果對你有幫助記得點點關注哦，

案例已上傳到github，有相關需求的可以去看看，如果有問題請指正！