基礎(chǔ)配置Webpack+React+多語(yǔ)言(一) 基礎(chǔ)配置
github地址
完整代碼：webpack-react-language
多語(yǔ)言組件webpack-react-language
關(guān)鍵字：react 多語(yǔ)言 國(guó)際版 React-intl
現(xiàn)在項(xiàng)目基本能跑起來(lái)了蚪腐，我們開始準(zhǔn)備多語(yǔ)言部分
打開調(diào)試器优床，會(huì)看到下面這句話焦读，推薦你安裝React DevTools
"Download the React DevTools for a better development experience: https://fb.me/react-devtools"
如果你可以打開chrome商店蛮原，搜索到React Developer Tools就可以直接點(diǎn)擊下載安裝
-
1.項(xiàng)目中添加了語(yǔ)言國(guó)際化的功能
一開始的時(shí)候日川，我考慮的是為整個(gè)項(xiàng)目添加config文件寓盗，根據(jù)不同的語(yǔ)言和地區(qū)辣垒，加載不同的config文件望侈，就能夠達(dá)到界面語(yǔ)言切換的目的。(我們的pc端多語(yǔ)言就是這么做的勋桶，兩個(gè)不同的配置文件脱衙，根據(jù)當(dāng)前頁(yè)面的語(yǔ)言，加載合適的文件)
但是語(yǔ)言的國(guó)際化不僅僅是將界面上的UI文字翻譯成另一種語(yǔ)言例驹，還包括了：
- 日期&時(shí)間顯示
- 數(shù)字顯示（英文環(huán)境下每隔3位一個(gè)逗號(hào)：1,000）
- 量詞的顯示（一個(gè)蘋果是apple捐韩，兩個(gè)蘋果就應(yīng)該是apples）
- 甚至還有一個(gè)字符串中間插了一個(gè)變量的情況（"今天午飯吃了{(lán)count}個(gè)雞腿"）
- ...
React-intl是雅虎的語(yǔ)言國(guó)際化開源項(xiàng)目FormatJS的一部分，通過(guò)其提供的組件和API可以與ReactJS綁定鹃锈。
React-intl提供了兩種使用方法
- 一種是引用React組建
另一種是直接調(diào)取API
官方更加推薦在React項(xiàng)目中使用前者荤胁，只有在無(wú)法使用React組件的地方，才應(yīng)該調(diào)用框架提供的API屎债。-
2.下面先來(lái)介紹React-intl提供的React組件仅政，有如下幾種：
以下幾種，在github中我都會(huì)放一個(gè)經(jīng)過(guò)實(shí)踐是可用的例子
- <IntlProvider />
包裹在需要語(yǔ)言國(guó)際化的組建的最外層盆驹，為包含在其中的所有組建提供包含id和字符串的鍵值對(duì)
（如： "homepage.title":"Hommily"; ）- <FormattedDate />
用于格式化日期圆丹，能夠?qū)⒁粋€(gè)時(shí)間戳格式化成不同語(yǔ)言中的日期格式。
傳入時(shí)間戳作為參數(shù)：
<FormattedDate
value={new Date(1459832991883)}
/>
輸出結(jié)果：
<span>4/5/2016</span>
- <FormattedTime />
用于格式化時(shí)間召娜，效果與<FormattedDate />相似
傳入時(shí)間戳作為參數(shù)：
<FormattedTime
value={new Date(1459832991883)}
/>
輸出結(jié)果：
<span>1:09 AM</span>
- <FormattedRelative />
通過(guò)這個(gè)組件可以顯示傳入組件的某個(gè)時(shí)間戳和當(dāng)前時(shí)間的關(guān)系运褪，比如 “ 10 minutes ago"
傳入時(shí)間戳作為參數(shù)：
<FormattedRelative
value={Date.now()}
/>
輸出結(jié)果：
<span>now</span>
10秒之后的輸出結(jié)果：
<span>10 seconds ago</span>
1分鐘之后的輸出結(jié)果：
<span>1 minute ago</span>
- <FormattedNumber />
這個(gè)組件最主要的用途是用來(lái)給一串?dāng)?shù)字標(biāo)逗號(hào)，比如10000這個(gè)數(shù)字玖瘸，在中文的語(yǔ)言環(huán)境中應(yīng)該是1,0000秸讹，是每隔4位加一個(gè)逗號(hào)，而在英語(yǔ)的環(huán)境中是10,000雅倒，每隔3位加一個(gè)逗號(hào)璃诀。
傳入數(shù)字作為參數(shù)：
<FormattedNumber value={1000} />
輸出結(jié)果：
<span>1,000</span>
- <FormattedPlural />
這個(gè)組件可用于格式化量詞，實(shí)際上可以傳入組件的量詞包括 zero, one, two, few, many, other 已經(jīng)涵蓋了所有的情況
<FormattedPlural
value={10}
one='message'
other='messages'
/>
輸出結(jié)果：
<span>messages</span>
- <FormattedMessage />
這個(gè)組件用于格式化字符串蔑匣，是所有的組件中使用頻率最高的組件劣欢，因?yàn)榛旧献厮校琔I上面的每一個(gè)字符串都應(yīng)該用這個(gè)組件替代
比如我們?cè)趌ocale配置文件中寫了如下內(nèi)容：
const app = {
greeting:'Hello Howard!",
}
export default app;
使用這個(gè)組件的時(shí)候，我們這么寫：
<FormattedMessage
id='app.greeting'
description='say hello to Howard'
defaultMessage='Hello, Howard!'
/>
id指代的是這個(gè)字符串在locale配置文件中的屬性名
description指的是對(duì)于這個(gè)位置替代的字符串的描述凿将，便于維護(hù)代碼校套，不寫的話也不會(huì)影響輸出的結(jié)果
當(dāng)在locale配置文件中沒(méi)有找到這個(gè)id的時(shí)候，輸出的結(jié)果就是defaultMessage的值
輸出的結(jié)果：
<span>Hello, Howard!</span>
- <FormattedHTMLMessage />
這個(gè)組件的用法和<FormattedMessage />完全相同牧抵，唯一的不同就是輸出的字符串可以包含HTML標(biāo)簽笛匙，但是官方不太推薦使用這個(gè)方法，如果可以想辦法用<FormattedMessage />的話犀变，就不應(yīng)該使用這個(gè)組件
-
3.安裝react-intl
注意：為了兼容Safari各個(gè)版本妹孙，需要同時(shí)安裝 intl，intl在大部分的『現(xiàn)代』瀏覽器中是默認(rèn)自帶的获枝，但是Safari和IE11以下的版本就沒(méi)有了蠢正，這里需要留個(gè)心眼。
雅虎React-intl項(xiàng)目地址
npm install react-intl --save-dev
npm install intl --save-dev
在Dialog組件中
import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
class Dialog extends Component {
constructor(props) {
super(props);
this.state = {
name : 'W.mf',
unreadCount: 1000,
};
}
render() {
const {name, unreadCount} = this.state;
return (
<p>
<FormattedMessage
id="welcome"
defaultMessage={`Hello {name}, you have {unreadCount, number}
{unreadCount, plural,
one {message}
other {messages}
}`}
values={{name: <b>{name}</b>, unreadCount}}
/>
</p>
);
}
}
export default Dialog;
wap/main.js
import React from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider} from 'react-intl';
import Dialog from './components/Dialog.jsx';
ReactDOM.render(
<IntlProvider locale="en">
<Dialog />
</IntlProvider>,
document.getElementById('content')
);
基礎(chǔ)配置Webpack+React+多語(yǔ)言(一) 基礎(chǔ)配置
github地址 ：webpack-react-language
關(guān)鍵字：react 多語(yǔ)言 國(guó)際版 React-intl
