dn-middleware-i18n

这是一个集成了「i18n」的前端多语言 dawn 中间件。

Usage no npm install needed!

<script type="module">
  import dnMiddlewareI18n from 'https://cdn.skypack.dev/dn-middleware-i18n';
</script>

README

@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 找到正确的语言文案。