portal-plugin-locale-paikon v0.0.1
portal-plugin-i18n
umi
多语言国际化插件,官方umi-plugin-locale的改进版本
- 支持json格式数据
- 支持命令行进行国际化数据提取
- 支持动态加载国际化数据
- 支持远程获取国际化获数据
v0.0.1
demo
请务必查看实例仓库代码
umi-locale-demo
注意
umi intl
命令会根据配置提取国际化到publicmessages
不再遵循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
里面的国际化数据
TODO
5 years ago