摘要：本國際化方案僅針對(duì)技術(shù)棧，且不會(huì)涉及服務(wù)端國際化內(nèi)容。引入多語言環(huán)境的數(shù)據(jù)雖然我只用到了文本翻譯的功能，以為就不需要加載這些數(shù)據(jù)，但后來發(fā)現(xiàn)這是必須的步驟。

前言

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

背景
國際化方案
國際化方案概述
前端國際化詳解、舉例
國際化資源文件管理
項(xiàng)目之間、開發(fā)者與翻譯者之間的協(xié)作
國際化規(guī)范附錄
擴(kuò)展閱讀

國際化方案概述
國際化是一個(gè)看似簡單，實(shí)則非常復(fù)雜的領(lǐng)域，實(shí)際進(jìn)行國際化工作時(shí)，大家會(huì)發(fā)現(xiàn)它往往會(huì)涉及很多內(nèi)容：

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

本國際化方案僅針對(duì) React 技術(shù)棧，且不會(huì)涉及服務(wù)端國際化內(nèi)容。

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

創(chuàng)建資源文件，以 key-value 方式存儲(chǔ)
加載資源文件，將頁面上 key 的內(nèi)容替換為相關(guān) value

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

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: "歡迎進(jìn)入react",
        },
      },
    },
    lng: lng,
    fallbackLng: lng,

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

實(shí)際使用結(jié)果

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

      
{t("Welcome")}
    
  );
}

export default App;

封裝后的成果：

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

react-intl
背景：

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

react-intl庫是業(yè)界很受歡迎的庫之一。 react-intl用包裹組件的形式裝飾你的React.Component，動(dòng)態(tài)注入國際化消息，以便能夠動(dòng)態(tài)加載語言環(huán)境數(shù)據(jù)，并且無需重新加載頁面

安裝：

npm install react-intl --save

載入語言環(huán)境數(shù)據(jù)。
React Intl 依賴這些數(shù)據(jù)來支持單復(fù)數(shù)和相對(duì)時(shí)間格式化的功能。

// 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]);  // 引入多語言環(huán)境的數(shù)據(jù)  

雖然我只用到了文本翻譯的功能，以為就不需要加載這些數(shù)據(jù)，但后來發(fā)現(xiàn)這是必須的步驟。不然會(huì)報(bào)錯(cuò)：

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

使用組件包裹需要實(shí)現(xiàn)國際化的根組件，這個(gè)組件樹之后就會(huì)在配置的i18n上下文中了。
由于項(xiàng)目中用到了react-hot-loader，根組件 Main被包裹了，并且是從多帶帶的一個(gè)文件 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()返回節(jié)點(diǎn)的最外層就行了。

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

添加多種語言對(duì)應(yīng)的文本。
比如要支持中英文，為了方便之后維護(hù)，可以新建兩個(gè)文件：

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中引入這兩個(gè)變量。

// 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

全局配置當(dāng)前的語言，和相對(duì)應(yīng)的文本。
即配置組件的兩個(gè)屬性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
    })
}

接下來，添加翻譯的文本到頁面中
基本只需要使用到一個(gè)組件：。這個(gè)組件默認(rèn)生成一個(gè)，內(nèi)容是翻譯后的文本，也就是 messages中對(duì)應(yīng)字段的值。

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

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

當(dāng)前語言為en時(shí)，生成結(jié)果：

Hello!

到這里，react-intl基本的國際化就實(shí)現(xiàn)了。

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

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

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

安裝
使用npm安裝

npm install react-intl-universal --save

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

image.png

于項(xiàng)目入口文件中配置國際化

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 是單例模式, 只應(yīng)該實(shí)例化一次
    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": "手機(jī)號(hào)",
    "HELLO": "你好, {name}。歡迎來到{where}!"
}

調(diào)用
在剛才的初始化代碼中，render函數(shù)里面已經(jīng)進(jìn)行了調(diào)用了。在整個(gè)項(xiàng)目的其他地方，由于已經(jīng)進(jìn)行了初始化了，所以可以直接調(diào)用了。調(diào)用的例子如下：

import intl from "react-intl-universal";

class Test extends Component {
  render() {
    return (
      

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

}

切換
再來看一下初始化函數(shù)

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

初始化的時(shí)候，除了直接指定語言外，還可以由函數(shù)determineLocale根據(jù)以下配置進(jìn)行指定：

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

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

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

那么，我們可以利用如下方式進(jìn)行切換：當(dāng)選擇相應(yīng)語言時(shí)，觸發(fā)回調(diào)函數(shù)，在函數(shù)內(nèi)，修改url或者cookie，然后進(jìn)行頁面刷新，重新初始化，即可以切換語言了。

下面我給出一個(gè)根據(jù)cookie切換的例子：

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

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

帶HTML標(biāo)簽的HTML 文本
變量
單復(fù)數(shù)形式
貨幣
日期

html中引用資源包里的文字

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

 {intl.get("SIMPLE")} 

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

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

{ 
   "SIMPLE": "This is HTML" 
}

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

{intl.getHTML("SIMPLE")}

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

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

引用結(jié)果如下：

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"表示在值前面加上美元符號(hào)($)

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

引用及顯示結(jié)果如下：

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

顯示日期
語法同上：{變量名, 類型, 格式化}，當(dāng)類型為"date"時(shí)，格式化有以下幾個(gè)選項(xiàng)：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

配置默認(rèn)message
當(dāng)遇到比如因拼寫錯(cuò)誤導(dǎo)致無法匹配到資源包里的文字時(shí)，可以事先配置默認(rèn)的message，這時(shí)當(dāng)無法匹配的資源包時(shí)會(huì)顯示默認(rèn)message

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

同理亦可配置帶html模板的默認(rèn)message

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

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

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

在html中引用時(shí)

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

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

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

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

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

為組件內(nèi)建文案提供統(tǒng)一的國際化支持

使用

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



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 文件，應(yīng)該引入 antd/dist/antd-with-locales.js，同時(shí)引入 moment 對(duì)應(yīng)的 locale，然后按以下方式使用：

const { LocaleProvider, locales } = window.antd;

...

return ;

到此今天的國際化分享大全就結(jié)束了，我個(gè)人感覺還是react-intl-universal比較好用，如果對(duì)你有幫助記得點(diǎn)點(diǎn)關(guān)注哦，

案例已上傳到github，有相關(guān)需求的可以去看看，如果有問題請(qǐng)指正！