@lx-frontend/babel-plugin-auto-i18n

babel-plugin-auto-i18n

配置项及使用方式

插件目前有以下配置项：

配置项	说明	类型	是否必填	默认值
i18nUrl	i18N的入口文件路径	string	必填	''
configUrl	语言配置文件的路径，基准路径为当前项目根目录	string	必填	''
mode	0: 黑名单模式，文件头带/i18n-disable/关闭自动国际化处理 1: 白名单模式，文件头带/i18n-enable/才开启自动国际化处理	int	非必填	0
enableLog	是否开启日志输出(日志文件名为auto-i18N.log)	boolean	非必填	true

使用举例

安装

:::info npm -i babel-plugin-lx-auto-i18n -D :::

配置

babel.config.json配置如下，其他类型的babel配置文件类似

module.exports = {
  presets: [
    xxx
  ],
  plugins: [
    [
      '@lx-frontend/auto-i18n', {
        'i18nUrl': 'src/config/i18n/index.js',
        'configUrl': './template/i18n/lang/cn.js',
        'mode': 1
      }
    ]
  ]
}

以下使用场景均支持自动i18n转换

function App() {
  const title = '立新车市';
  const desc = `立新二手车`;
  // 这是一段注释
  const desc2 = /*i18n-disable*/`温馨提示`;
  const desc3 = `预计${title}月${desc}日${desc2}分结束`;
  const desc4 = `更新报价${1+1}发卡设计费`;

  return (
    <div
      className="app"
      title={"立新车市"}
      color="立新二手车"
      desc={`预计${title}月${desc}日${desc2}分结束`}
      desc4={`更新报价${1 + 1}发卡设计费`}
    >
      <img src={Logo} />
      <h1>{`预计${title}月${desc}日${desc2}分结束`}</h1>
      <p>立新二手车 {desc}</p>
      <p>立新二手车</p>
      <div>
        {
            /*i18n-disable*/'中文'
        }
      </div>
    </div>
  );
}

注意事项

• 在写中文时，请确保本地国际化配置文件中有对应的kv配置。
• 模板字符串支持分段国际化，比如更新报价${desc}发卡设计费，'更新报价{0}发卡设计费'在配置文件中无对应kv，但是'更新报价'在配置文件中有对应kv，则会对'更新报价'单独做国际化处理。注意，不能写可选链语法，不支持，只能简单变量。
• 若想单独对某个字符串禁用自动国际化，则在该字符串前面添加/i18n-disable/即可。比如/i18n-disable/'中文'。

后续计划

后续有如下计划

:::info

• 国际化配置文件的自动维护机制 :::