国际化

国际化解决方案，包含了多语言（内容多语和数据多语）、多时区、多币种、多语言录入、国际化手机号录入、多语翻译平台、本地化等相关内容。

概述：组件库支持的多语言能力

多语言切换和多语言构建

多语言切换，以及批量替换工具

对于项目的多语设置，我们推荐使用react-intl。 简要说明如下：假设项目的入口为 App 组件，需要根据cookie判断语言

示例

1、配置语言包，en_US.json,zh_CN.json

  1. {
  2.   "Demo.content": "I am App"
  3. }
  1. {
  2.   "Demo.content": "我是App"
  3. }

2、将本地语言包 en_US.json 与 tinper 语言包合并，并导出 en_US.js，中文同理

  1. // en_US.js
  2. import en from 'tinper-bee/locale/en_US.js';
  3. import appLocaleData from 'react-intl/locale-data/en';
  4. import messages from 'en_US.json';
  6. export default {
  7.   messages: {
  8.     ...messages,
  9.   },
  10.   tinperLocale: en,
  11.   locale: 'en',
  12.   data: appLocaleData
  13. };
  15. // zh_CN.js
  16. import zh from 'tinper-bee/locale/zh_CN.js';
  17. import appLocaleData from 'react-intl/locale-data/zh';
  18. import messages from 'zh_CN.json';
  20. export default {
  21.   messages: {
  22.     ...messages,
  23.   },
  24.   tinperLocale: zh,
  25.   locale: 'zh',
  26.   data: appLocaleData
  27. };

3、将 App 组件包装，给tinper的 Locale 组件传入 locale属性，给 react-intl 组件的 IntlProvider 传入 key,locale, messages 属性。

  1. import cookie from 'react-cookie';
  2. import { Locale } from 'tinper-bee';
  3. import { IntlProvider } from 'react-intl';
  4. import zh from 'zh_CN.js';    
  5. import en from 'en_US.js';
  7. class Inter extends Component {
  9.     chooseLocale=()=>{
  10.         switch(cookie.load('u_locale')){
  11.             case 'zh-CN':
  12.                 return zh
  13.             break;
  14.             case 'en-US':
  15.                 return en;
  16.             break;
  17.             default:
  18.                 return zh;
  19.         }
  20.     }
  21.     render() {
  22.         let { tinperLocale,locale,messages } = this.chooseLocale();
  23.         return (
  24.             <Locale locale={tinperLocale}>
  25.                 <IntlProvider key={locale} locale={locale} messages={messages}>
  26.                     <App/>
  27.                 </IntlProvider>
  28.             </Locale>
  29.         )
  30.     }
  31. }

4、在 App 设置默认语言，所用文字使用 FormattedMessage 包装

  1. import { FormattedMessage, defineMessages } from 'react-intl';
  3. const locales = defineMessages({
  4.     content: {
  5.         id: 'Demo.content',
  6.         defaultMessage: '我是App',
  7.     }
  8. });
  10. class App extends Component {
  11.     render() {
  12.         return (
  13.             <div>
  14.                 <FormattedMessage  {...locales.content}/>
  15.             </div>
  16.         )
  17.     }
  18. }

注：使用 react-intl ，如果要兼容ie浏览器，需要单独引入 polyfill。此 polyfill cdn地址为动态地址，会根据浏览器不同使用不同的 polyfill

  1. <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

多语言构建

指通过工具将一份代码翻译成多份静态资源，如：webpack-plugin-i18n，以及自研的 lanbuild 工具。

lanbuild 示例 使用 lanbuild 组件产出多种语言版本代码。 目前只支持，中文，英文，繁体中文。 后续支持多种语言以及简化配置，开发正在努力中。。。

多语文件包 json格式示例

  1. { 
  2.   "js.sin.src.0003": "更新成功EN",
  3.   "js.com.Ind1.0001": "员工编号EN",
  4.   "js.com.Ind1.0002": "员工姓名EN",
  5.   "js.com.Ind1.0003": "员工性别EN",
  6.   "js.com.Ind1.0004": "所属部门EN",
  7.   "js.com.Ind1.0005": "职级EN",
  8.   "js.com.Ind1.0006": "工龄EN",
  9.   "js.com.Ind1.0007": "司龄EN",
  10.   "js.com.Ind1.0008": "年份EN",
  11.   "js.com.Ind1.0009": "月份EN",
  12.   "js.com.Ind1.0010": "补贴类别EN",
  13.   "js.com.Ind1.0011": "补贴标准EN",
  14.   "js.com.Ind1.0012": "实际补贴EN",
  15.   "js.com.Ind1.0013": "是否超标EN",
  16.   "js.com.Ind1.0014": "申请时间EN",
  17.   "js.com.Ind1.0015": "领取方式EN",
  18.   "js.com.Ind1.0016": "领取时间EN",
  19.   "js.com.Ind1.0017": "备注EN",
  20.   "js.com.Ind1.0018": "请勾选数据后再新增EN",
  21.   "js.com.Ind1.0019": "请勾选数据后再更新EN",
  22.   "js.com.Ind1.0020": "数据填写不完整EN",
  23.   "js.com.Ind1.0021": "请勾选数据后再删除EN",
  24.   "js.com.Ind1.0022": "A2单表行内编辑示例EN",
  25.   "js.com.Ind1.0023": "按钮权限加载完成EN",
  26.   "js.com.Ind1.0024": "新增EN",
  27.   "js.com.Ind1.0025": "修改EN",
  28.   "js.com.Ind1.0026": "删除EN",
  29.   "js.com.Ind1.0027": "导出EN",
  30.   "js.com.Ind1.0028": "保存EN",
  31.   "js.com.Ind1.0029": "取消EN",
  32.   "js.com.Ind1.0030": "数据未保存，确定离开 ?EN",
  33.   "js.com.Ind1.0031": "是否要删除 ?EN",
  34.   "js.com.Ind2.0001": "请选择EN",
  35.   "js.com.Ind2.0002": "男EN",
  36.   "js.com.Ind2.0003": "女EN",
  37.   "js.com.Ind2.0004": "一月EN",
  38.   "js.com.Ind2.0005": "二月EN",
  39.   "js.com.Ind2.0006": "三月EN",
  40.   "js.com.Ind2.0007": "四月EN",
  41. }