前言
前段時間公司拓展了海外業務，因此需要前端系統的開發在完成業務需求的同時，可以實現國際化，以滿足用戶的使用需要。
技術挑戰
之前完全沒有接觸相關的技術，乍一看感覺很是簡單，就是翻譯一下文案。但是真正著手做的時候發現面臨很多技術上的挑戰，隨著項目上線，所以梳理一下整個開發過程中的思路。
需要進行國際化開發的內容
label、placeholder、字段校驗提示信息
第三方插件
公司項目中用到了第三發組件：Antdesign和bootstraptable，都支持國際化開發，但是其中bootstraptable的官方文檔對相關的內容較少，所以花費了較多的時間。
開發思路
了解到React有支持國際化的組件-ReactIntl，所以除第三方插件以外，項目中的文案，基本都可以實現。
把需要翻譯的文案提取出來，放到對應的語言文件（en_US.js）中，因為項目中好多內容是重復的，所以工作量不是很大，如果內容很多的話，這種方式的工作量太大了，需要更換方案。
開發過程
- 安裝ReactR-Intl組件
React-intl是雅虎的語言國際化開源項目FormatJS的一部分，通過其提供的組件和API可以與ReactJS綁定。上面這句話援引了官方文檔的說辭，主要表達的是，這是一個很好的開源項目，有大團隊支持，使用量也很大，不會有太多坑，可以放心用。
React-intl提供了兩種使用方法，一種是引用React組件，另一種是直接調取API，官方更加推薦在React項目中使用前者，只有在無法使用React組件的地方，才應該調用框架提供的API，事實上，我在項目的過程大部分都是用API的方式。
- 安裝react-intl需要執行下面的命令：
npm install intl --save
- 在項目中引入react-intl
import { FormattedMessage } from 'react-intl';
該組件提供了全面的API來幫助我們進行開發，這里我們不詳細講解各個API，只是介紹如何使用，其中使用頻率較高API包括：FormattedMessage（字符串格式化API）、injectIntl（高階組件）、FormattedPlural（格式化量詞）
- 通過代碼來了解一下如何使用上述API
import { injectIntl， FormattedMessage } from 'react-intl';
class Mycomponent extends Reflux.Component{
render(){
const {messages, loacal} = this.props.intl;
return (
<Input placeholder={messages["warehouseCodeplacehoder"]}/>
<Button type="primary" htmlType="submit" icon="search" ><FormattedMessage id="common_SearchSubmitBtn"/></Button>
)
}
}
export default injectIntl(Mycomponent );
通過injectIntl 在我們在 組件的 props 上會得到一個 intl 對象，它提供formatDate、formatTime、formatPlural、formatMessage等方法和locale、formats、messages等屬性，這時候我們想要顯示字符串，可以使用formatMessage進行字符串的格式化。loacal可以拿到當前代碼的語言環境。
可以直接利用messages['id]的方式，可以直接從語言文件中拿到當前語言環境下文檔中對應id的字符串。
對于其他的字符串，可以使用formatMessageAPI進行格式化。
這種方式的應用場景還是蠻多的。
- 配置語言文件
語言的配置文件zh-config.js是比較關鍵的，我們舉例說明
import appLocaleData from 'react-intl/locale-data/zh';
import messages from './zh_CN';
window.appLocale = {
messages: Object.assign({}, messages),
locale: 'zh-CN',
data: appLocaleData,
},
};
export default window.appLocale;
下面是語言文件zh.js，即key-value鍵值對
const zh_CN = {
id: "中文字符串",
}
export default zh_CN;
主入口文件mian.js
import React, {Component} from 'react';
import { IntlProvider, addLocaleData } from 'react-intl';
function getLocale(lang){
let result={};
switch(lang){
case 'zh_CN':
result = require('./locale/zh-config');
break;
case 'en_US':
result = require('./locale/en-US.config');
break;
default: result = require('./locale/zh-config');
}
return result.default || result;
}
class Lang extends React.Component{
constructor(props){
super(props);
this.state={
lan:" "
}
this.changeLang=this.changeLang.bind(this);
}
changeLang(p){
if(p==='en-US'){
this.setState({
lan:"en_US"
})
}
else {
this.setState(
{lan:"zh_CN"}
)
}
}
render(){
const {lan} = this.state;
const appLocale = getLocale(lan);
addLocaleData(...appLocale.data);
window.lang = appLocale.locale;
return (
<div >
<IntlProvider
locale={appLocale.locale}
messages={appLocale.messages}
>
<LocaleProvider locale={appLocale.antd}>
<Index />
</LocaleProvider>
</IntlProvider>
<Radio.Group style={style}>
<Radio.Button onClick={() => this.changeLang('zh-CN')} >中文</Radio.Button>
<Radio.Button onClick={() => this.changeLang('en-US')}>En</Radio.Button>
</Radio.Group>
</div>
)
}
}
ReactDOM.render(<Lang/>,document.getElementById('root'));
當設置了上述兩個文件時，我們可以根據當前locale值來找對應的配置文件，從而找到對應的語言文件，再去匹配對應的id，拿到value值。我們在主入口文件中進行設置，切換到對應語言時，導入該語言的配置文件和語言包，從而全面替換字符串，實現多語言切換。
- bootstraptable的國際化開發
bootstraptable的國際化開發難點在于，他的官方文檔這方面寫的較簡潔，所以摸索了較長時間，最后也是同過injectIntl高階組件包裹table，從而拿到當前語言，再配置表格自動導入對應的語言包。
import createReactClass from 'create-react-class';
import 'bootstrap';
import 'bootstrap-table';
import {injectIntl } from "react-intl";
import Main from './main/Main';
const Layout = createReactClass({
changeLang (p){
switch(p){
case "en-US": require("bootstrap-table-locale-en");
break;
case "th-TH": require("bootstrap-table-locale-th");
break;
case "zh-CN": require("bootstrap-table-locale-zh");
break;
default: require("bootstrap-table-locale-en");
}
},
render(){
this.changeLang(this.props.intl.locale)
return (
<div>
<Main {...this.props}></Main>
</div>
);
},
});
module.exports = injectIntl(Layout);
- antd國際化開發
antd 提供了一個 React 組件 LocaleProvider 用于全局配置國際化文案。
LocaleProvider 使用 React 的 context 特性，只需在應用外圍包裹一次即可全局生效。
mian.js中有具體的使用方法，可以參考。
解決store中的多語言實現
項目中調用接口的回調處理都在store文件中實現，會有一些提示信息。但是react-intl并不支持store中字符串的多語言，這個比較不好處理，在git上找到了一種解決方案。
首先添加一個組件 CurrentLocale.js
import {injectIntl} from 'react-intl';
// Does not actually render anything visible.
// We need it to provide access to internationalization for classes
// which are not a React component
class CurrentLocale extends React.Component {
static CurrentLocale = null;
componentWillMount() {
if (!CurrentLocale.instance)
CurrentLocale.instance = this;
}
render() {
return null;
}
}
export default injectIntl(CurrentLocale);
export function intl() {
return CurrentLocale.instance.props.intl;
}
export function formatMessage(...args) {
return intl().formatMessage(...args);
}
在項目入口處引入
然后在store文件中引入使用即可
import {formatMessage} from "../../../../locale/CurrentLocale";
class MyComponent extends Reflux.Store{
onFunctionCompleted(res){
if(res.state==='success'){
message.success(formatMessage({id:"OperateSuccess"}));
}else{
Modal.error({title:formatMessage({id:"OperateFailed"}),content:res.error});
}
}
}
export default MyComponent ;
寫在后面
畢業后的第一個項目就要求實現國際化，對于之前沒有項目經驗又沒有人帶的我來說，挑戰巨大。因為之前沒有接觸過，所以全部都是邊學邊用，發現可以參考的文章不是很多，所以總結一下自己開發過程中的難點和通點，如果這篇文章可以幫助到大家，那么也算是做了一件有意義的事情。
