@ali/dn-middleware-i18n
这是一个集成了「i18n」的前端多语言 dawn 中间件。
1. 添加 pipe 配置,启用 i18n
dev:
- name: i18n
- name: webpack
默认文案存放在根目录的 locales 下 (如果没有请新建),每个语言一个文件,示例
zh-CN.yml
zh-HK.yml
en-US.yml
2. 在代码中使用多语言文案
import i18n from '$i18n';
function App(){
return <div>{i18n('hello')}</div>;
}
其中 hello
是在文案中的 key
,同时还支持「文案占位符」和「文案默认值」,例如
有如下文案
hello: 你好,{name}
可以这样使用
i18n('hello',{ name: '张三' });
i18n('xxxx',null,'默认兜底文案');
i18n('xxxx','默认兜底文案');
i18n('hello',{ name: '张三' },'默认兜底文案');
如果 xxxx
没有在文案中定义,将会显示「兜底文案」。
此外,还可在文案中包括「动态计算的表达式」,比如
info: There are {total} {total>1?'records':'record'}
那么,将会有如下的结果
i18n('info',{ total: 1 });
//将显示:There are 1 record
i18n('info',{ total: 2 });
//将显示:There are 2 records
3. 启用 JSX 的支持
如果是 React
工程,还可开启 JSX
的支持,此时 i18n
返回的将不是普通字符串,而且是合法的 ReactNode
dev:
- name: '@ali/mcms'
appName: <your_app_name>
jsx: true
- name: webpack
那么,可在引用文案时,这样写
i18n('key',{
abc: <span>Hello</span>
});
4. 如何识别对应的 language
因为场景多变,为了更通用,i18n
并不会自动侦测当前应用使用语言,需要在应用启动时告知 i18n
当前语言。
比如,在应用启用时加入如下代码,可以根据当前「浏览器语言设定」渲染界面
import i18n from '$i18n';
i18n.init({
language: navigator.language
defaultLanguage: 'zh-CN'
});
同时,还可以通过 defaultLanguage
设定「默认语言」,当检查到的语言,当前应用并未支持时,会以「默认语言」显示。
5. 构建单独的语言包
默认情况下,语言文案将会和代码一并打在一个 bundle 中,如果想分离语言包,可通过 extract 选项,示例如下
dev:
- name: i18n
extract: ./build/locales
- name: webpack
通过如上的配置,语言文案将会并分别打包并存放到 ./build/locales 目录,每种语言都会打成一个单独的语言包。 此时,只需要在页面中并在应用代码之前引用语言包文件就行了,引用哪个语言包,当前就会自动显示那种语言的文案。
注意:如果引用的一个其他方式生成的独立发布的「全量语言包」,全量包或包括了所有语言,类似如下格式
{
"zh-CN": { },
"en-US": { }
}
此时,也是能正确工作的,i18n 也会自动根据 init 时指定的 lang 找到正确的语言文案。