@lx-frontend/babel-plugin-auto-i18n
v1.0.8
Published
babel plugin for auto i18n
Downloads
15
Readme
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
- 国际化配置文件的自动维护机制 :::