Portal-plugin-locale-paikon NPM

portal-plugin-i18n

umi多语言国际化插件，官方umi-plugin-locale的改进版本

支持json格式数据
支持命令行进行国际化数据提取
支持动态加载国际化数据
支持远程获取国际化获数据 v0.0.1

demo

请务必查看实例仓库代码 umi-locale-demo

注意

umi intl 命令会根据配置提取国际化到public
messages不再遵循 singular规则，始终为messages, 单数形式将不再被识别，不能提取国际化数据
增加了webpack配置，build模式下，public/lang下面的文件不进行编译，减少体积

使用

yarn 或者 npm

$ yarn add portal-plugin-i18n

配置说明

本插件需要禁用官方插件umi-plugin-react的locale功能

config/config.js 或者 .umirc.js配置如下

export default [
  [
    'umi-plugin-react',
    {
      ...
      antd: true,
      locale:false, // 禁用官方locale, 默认关闭
      ...
    },
  ],
  ['portal-plugin-i18n', options],
];

options 默认值

{
  baseNavigator: true,
  // momentLocaleMap: { en: 'en-nz', zh: 'zh-cn' },
  // antLocaleMap: { en: 'en_US', zh: 'zh_CN' },
  // localeMap: { zh: 'zh-CN', en: 'en-US' },
  // default: 'en',
  translate: false, 
  dynamicIntl: false,
  transLateSupport:{ 
    // translate 为 true, 才有效，默认四种国际化语言，如果不需要这么多，后续再优化 ~~~
    enUS:'en-US',
    zhCN:'zh-CN',
    zhTW:'zh-TW',
    zhHK:'zh-HK',
  }
}

目录说明

由于官方插件的国际化是放在locales(locale)文件夹下面, 本插件也继承了官方的设定, 保留了官方umi-plugin-react 插件locale的全部功能（增加了json的支持），所以禁用掉了官方功能，如果是在locales下面写国际化文件，请保持原样，仅仅是增加了json的支持。

messages/下面放本插件规定的国际化文件

public/lang下面放以语言为目录动态加载的国际化文件(json格式)

├── public/lang      // 动态国际化数据，不参与打包, json数据
    ├── zh-CN/
    ├   ├── Demo.json
    └── en-US/ 
        ├── Demo.json 
├── dist/                          
├── mock/                         
└── src/                          
    ├── layouts/index.js          
    ├── pages/
    |—— locales      // 此目录下的数据保持与官方规定一致，仅增加json支持
        |__ global.js
        |__ global.json                
    └── messages       // 本地国际化数据存放目录，支持js|ts（export default 形式），json
        ├── global.js
        └── global.json              
├── .env                          
└── package.json

如果.umirc.js(config/config.js)里配置了singular: true，messages要改成message,locales 要改成 locale

messages

messages目录下放置国际化数据,格式规定如下

对象形式
必须包含id,defaultMessage 两个key, 其余根据项目情况添加

test.json

{
  "test":{
    "id":"title-test",
    "defaultMessage":"全局标题{title}",
    "enUS":"title-test {title}",
    "zhTW":"全域性標題{title}",
    "zhHK":"全局標題{title}"
    ...
  }
}

test.js

export default {
  test:{
    id:'title-test',
    defaultMessage:'全局标题{title}',
    enUS:'title-test {title}',
    zhTW:'全域性標題{title}',
    zhHK:'全局標題{title}',
  },
}

options

{
  baseNavigator: true,
  momentLocaleMap: { en: 'en-nz', zh: 'zh-cn' },
  antLocaleMap: { en: 'en_US', zh: 'zh_CN' },
  localeMap: { zh: 'zh-CN', en: 'en-US' },
  default: 'en',
  translate: true,
  dynamicIntl: true,
  transLateSupport:{
    enUS:'en-US',
    zhCN:'zh-CN',
    zhTW:'zh-TW',
    zhHK:'zh-HK',
  }
}

optionsbaseNavigator|default

与官方配置相同

options.momentLocaleMap options.antLocaleMap

由于moment,antd国际化文件名称并不是严格和浏览器等到的语言名称一致的的，可以根据配置指定加载的文件

如上面配置所示，则是指定浏览器语言为en时，使用 moment下的moment/locale/en-nz国际化文件，antd下的antd/lib/locale-provider/en-US文件

options.localeMap

当 options.default 不是标准的文件命名, 或者浏览器语言不是预期的lang-country形式时（如zh,en），此配置可以指定加载locales下的哪种国际化文件，如 zh: 'zh-CN', 则会合并所有locales文件夹下面zh-CN.json或者zh-CN.js文件作为国际化资源

options.transLateSupport

这个是messages下面国际化数据的map信息，用于表示目录与key的转换关系用上面的test.json举例说明,如下配置

{
  transLateSupport:{
    enUS:'en-US',
    zhCN:'zh-CN',
    zhTW:'zh-TW',
    zhHK:'zh-HK',
  }
}

enUS:'en-US'表示 enUS的value值会被提取到en-US文件里,

即最终生成的 src/locales/en-US.json 包含

{
  ...
  "title-test"："title-test {title}"
  ...
}

options.translate

当translate=true时，会增加一个umi intl 命令，此命令负责提取messages下面的国际化数据到src/locales目录下，根据options.transLateSupport的配置

如果没有对zhTW zhHK指定数据，本插件默认开启了香港，台湾国际化使用node-opencc进行翻译，
options.dynamicIntl
开启此功能后，umi项目中会新增一个API: umi/withIntl，可以通过引入这个新的API，获得动态加载国际化数据的功能

为了更多的灵活性，你必须对此API进行再次封装

项目中新建自己的工具函数，如 withIntl.js

withIntl.js

import { withIntl } from 'umi/withIntl';
// import withIntl  from 'umi/withIntl';
import { getLocale } from 'umi/locale';
 
const locale = getLocale();
const getFloder = () => { // 自定义国际化对应关系
  if (locale.match(/zh/g)) return 'zh-CN'; 
  if (locale.match(/en/g)) return 'en-US'; 
  return locale;
};


export default component => withIntl(getFloder(getLocale()), component);

在组件中使用

import { FormattedMessage, setLocale, getLocale } from 'umi/locale';
import withIntl from './withIntl';

const transLate = props => {
  const { formatMessage } = props.intl;
  ...
  return (
    {formatMessage({
      id: 'title-test',
    })}
  );
};

export default withIntl('TransLate')(transLate);

withIntl('TransLate')(transLate) 代表 transLate组件会使用public/lang/**/TransLate.json里面的国际化数据