React項目國際化(antd)多語言開發

前言

最近新接了一個項目，從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 (
    <div className="App">
      <p>{t('Welcome')}</p>
    </div>
  );
}

export default App;

封裝後的成果：

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

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.

使用<IntlProvider>組件包裹須要實現國際化的根組件，這個組件樹以後就會在配置的i18n上下文中了。
因爲項目中用到了react-hot-loader，根組件 Main被<AppContainer>包裹了，而且是從單獨的一個文件 import 了 Main 組件。

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

因而直接在 Main.js 中使用<IntlProvider>組件。把它加到 render()返回節點的最外層就好了。

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

添加多種語言對應的文本。
好比要支持中英文，爲了方便以後維護，能夠新建兩個文件：

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

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

// Main.js
render(){
    let messages = {}
    messages['en'] = en_US;
    messages['zh'] = zh_CN;
    return (
        <IntlProvider locale={this.state.lang} messages={messages[this.state.lang]}>
            //··· ···
        </IntlProvider>
    )
}

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

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

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

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

import { FormattedMessage  } from 'react-intl'; /* react-intl imports */
//... ...
<FormattedMessage id="hello" />

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

<span>Hello!</span>

到這裏，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 &&
      <div>
        {intl.get('SIMPLE')}
      </div>
    );
  }

}

語言配置文件能夠是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 (
      <div>
        {intl.get('INPUT_MOBILE')}
      </div>
    );
  }

}

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

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()

<div> {intl.get('SIMPLE')} </div>

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

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

{ 
   "SIMPLE": "This is <span style='color:red'>HTML</span>" 
}

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

<div>{intl.getHTML('SIMPLE')}</div>

數字形式和千分位分隔符
下例中的變量爲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(<h2>沒有找到這句話</h2>)

帶變量的message
資源包裏的配置以下

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

在html中引用時

<div> intl.get('HELLO', {name:'banana', where:'China'}) </div>
顯示的結果爲：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 <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;

提供了英語，中文，俄語，法語，德語等多種語言支持，全部語言包能夠在 這裏 找到。

注意：若是你須要使用 UMD 版的 dist 文件，應該引入 antd/dist/antd-with-locales.js，同時引入 moment 對應的 locale，而後按如下方式使用：

const { LocaleProvider, locales } = window.antd;

...

return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

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

案例已上傳到github，有相關需求的能夠去看看，若是有問題請指正！