基础配置Webpack+React+多语言(一) 基础配置
github地址
完整代码：webpack-react-language
多语言组件webpack-react-language
关键字：react 多语言 国际版 React-intl
现在项目基本能跑起来了，我们开始准备多语言部分
打开调试器，会看到下面这句话，推荐你安装React DevTools
"Download the React DevTools for a better development experience: https://fb.me/react-devtools"
如果你可以打开chrome商店，搜索到React Developer Tools就可以直接点击下载安装
-
1.项目中添加了语言国际化的功能
一开始的时候，我考虑的是为整个项目添加config文件，根据不同的语言和地区，加载不同的config文件，就能够达到界面语言切换的目的。(我们的pc端多语言就是这么做的，两个不同的配置文件，根据当前页面的语言，加载合适的文件)
但是语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言，还包括了：
- 日期&时间显示
- 数字显示（英文环境下每隔3位一个逗号：1,000）
- 量词的显示（一个苹果是apple，两个苹果就应该是apples）
- 甚至还有一个字符串中间插了一个变量的情况（"今天午饭吃了{count}个鸡腿"）
- ...
React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。
React-intl提供了两种使用方法
- 一种是引用React组建
另一种是直接调取API
官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。-
2.下面先来介绍React-intl提供的React组件，有如下几种：
以下几种，在github中我都会放一个经过实践是可用的例子
- <IntlProvider />
包裹在需要语言国际化的组建的最外层，为包含在其中的所有组建提供包含id和字符串的键值对
（如： "homepage.title":"Hommily"; ）- <FormattedDate />
用于格式化日期，能够将一个时间戳格式化成不同语言中的日期格式。
传入时间戳作为参数：
<FormattedDate
value={new Date(1459832991883)}
/>
输出结果：
<span>4/5/2016</span>
- <FormattedTime />
用于格式化时间，效果与<FormattedDate />相似
传入时间戳作为参数：
<FormattedTime
value={new Date(1459832991883)}
/>
输出结果：
<span>1:09 AM</span>
- <FormattedRelative />
通过这个组件可以显示传入组件的某个时间戳和当前时间的关系，比如 “ 10 minutes ago"
传入时间戳作为参数：
<FormattedRelative
value={Date.now()}
/>
输出结果：
<span>now</span>
10秒之后的输出结果：
<span>10 seconds ago</span>
1分钟之后的输出结果：
<span>1 minute ago</span>
- <FormattedNumber />
这个组件最主要的用途是用来给一串数字标逗号，比如10000这个数字，在中文的语言环境中应该是1,0000，是每隔4位加一个逗号，而在英语的环境中是10,000，每隔3位加一个逗号。
传入数字作为参数：
<FormattedNumber value={1000} />
输出结果：
<span>1,000</span>
- <FormattedPlural />
这个组件可用于格式化量词，实际上可以传入组件的量词包括 zero, one, two, few, many, other 已经涵盖了所有的情况
<FormattedPlural
value={10}
one='message'
other='messages'
/>
输出结果：
<span>messages</span>
- <FormattedMessage />
这个组件用于格式化字符串，是所有的组件中使用频率最高的组件，因为基本上，UI上面的每一个字符串都应该用这个组件替代
比如我们在locale配置文件中写了如下内容：
const app = {
greeting:'Hello Howard!",
}
export default app;
使用这个组件的时候，我们这么写：
<FormattedMessage
id='app.greeting'
description='say hello to Howard'
defaultMessage='Hello, Howard!'
/>
id指代的是这个字符串在locale配置文件中的属性名
description指的是对于这个位置替代的字符串的描述，便于维护代码，不写的话也不会影响输出的结果
当在locale配置文件中没有找到这个id的时候，输出的结果就是defaultMessage的值
输出的结果：
<span>Hello, Howard!</span>
- <FormattedHTMLMessage />
这个组件的用法和<FormattedMessage />完全相同，唯一的不同就是输出的字符串可以包含HTML标签，但是官方不太推荐使用这个方法，如果可以想办法用<FormattedMessage />的话，就不应该使用这个组件
-
3.安装react-intl
注意：为了兼容Safari各个版本，需要同时安装 intl，intl在大部分的『现代』浏览器中是默认自带的，但是Safari和IE11以下的版本就没有了，这里需要留个心眼。
雅虎React-intl项目地址
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')
);
基础配置Webpack+React+多语言(一) 基础配置
github地址 ：webpack-react-language
关键字：react 多语言 国际版 React-intl
