@umu-team/i18n-extract-loader

@umu-team/i18n-extract-loader

Webpack loader to extract i18n text into json.

Install

npm i -D @umu-team/i18n-extract-loader

Usage

webpack 中的配置：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'ts-loader',
          {
            loader: '@umu-team/i18n-extract-loader',
            options: {
              locale: 'en-us',
            },
          },
        ],
      },
    ];
  }
}

代码中，将文案以 __(xxx)|___(xxx) 包裹，前者表示文案为文案私有，后者表示该文案为公用。

文案中的变量

JS 示例：

const a = 'UMU 小助手';
const b = 'UMU 互动平台';
const txt = '__(该课程来自{$0}，由{$1}提供技术支持)(a,b)';

编译后为：

const a = 'UMU 小助手';
const b = 'UMU 互动平台';
const txt = '该课程来自' + a + '，由' + b + '提供技术支持';

HTML 模板示例（angular 中）：

<p>__(共{$0}门课程{$1}小节)({{a}} , {{b}} )</p>

编译后为：

<p>共{{a}}门课程{{b}}小节</p>

英文单复数

单复数通过将量词提取出来单独书写的试，由工具自动转成运行时代码。

JS 示例：

const a = 1;
const b = 16;
const txt = '__(共{$0{0=门课程,1=门课程}}，{$1{0=小节,1=小节}})(a,b)';

编译后为：

const a = 5;
const b = 16;
const txt = "共" + a+ (a == 1 ? "门课程" : "门课程") + b + (b == 1 ? "个小节" : "个小节")

HTML 模板示例（angular 中）：

<p>__(共{$0{0=门课程,1=门课程}}门课程{$1{0=个小节,1=个小节}})({{a}} , {{b}} )</p>

编译后为：

<p>共{{a+(a==1?'门课程':'门课程')}}{{b+(b==1?'个小节':'个小节')}}</p>

单复数中数字与量词分开的情况

特殊情况下，需要将量词与数字进行特殊的样式展示，这时需要将二者中某个加上 HTML 标签。此种情况下可通过 $$ 标识变量以编译后只输出处理好单复数的量词，以达到量词与数量分开的目的。

示例：

const num = 9;
//正常情况下
- const str = '__(一共有{$0{0=个,1=个}人})(num)' // => const str = '一共有'+num+(num==1?'个':'个')+'人';
//需要将量词与数量分开的情况
+ const str = '__(一共有<span>{$0}</span>{$$1{0=个,1=个}人})(num,num)' // => const str = '一共有<span>'+num+'</span>'+(num==1?'个':'个')+'人';

Options

• locale 执行的语言参数, e.g. zh-cn
  • type: string
  • defaut: en-us
• pattern 多语定界符
  • type: RegExp
  • defaut: /__\((.+?)\)/g
• isExtract 是否执行抽取，此操作会清空本地的变更语言文件，生成新的变更语言文件
  • type: bool
  • defaut: false
• isTranslate 是否执行替换操作，将变更语言文件中的翻译同步到组件的语言文件中
  • type: bool
  • defaut: false
• debug 调试模式，打印执行信息
  • type: bool
  • defaut: false