ZouHuaYi/rollup-i18n-auto-create-plugin(opens in a new tab)
Language: TypeScript
- stars
- 2
- watchers
- 1
- forks
- 0
- open issues
- 0
- Last updated
- 05/15/2026
Language: TypeScript
这是一个针对 Vue3 + Vite 开发环境设计的 i18n 自动化插件。它能够自动识别项目代码(.vue, .js, .ts, .jsx, .tsx)中的中文字符串,将其替换为国际化调用函数(如 t('key')),并自动维护语言映射文件。
zh-CN 映射文件;打包时可同步整理多语言包。console.log、alert 中的中文,避免干扰调试。@ 符号(@@),完美兼容 vue-i18n 的链接消息语法。npm install rollup-i18n-auto-create-plugin -D
# 或者
pnpm add rollup-i18n-auto-create-plugin -D在 vite.config.ts 中配置:
import RollupI18nCreatePlugin from 'rollup-i18n-auto-create-plugin' export default defineConfig({ plugins: [ RollupI18nCreatePlugin({ i18nPath: 'src/locales/zh-CN.ts', langPath: ['src/locales/en.ts'], injectToJS: `import { useI18n } from '@/hooks/web/useI18n'\nconst { t } = useI18n()`, excludes: ['locale', 'useI18n', 'node_modules'], jsText: 't', tempText: 't', regi18n: 'useI18n', delay: 1000, runBuild: true, // 新增配置项 keyLength: 16, cryptoKey: 'your-secret-key', preText: 'APP_', cleanUnusedKeys: true }), ] })
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
i18nPath |
string |
src/locales/zh-CN.ts |
主语言文件(通常是中文)的存储路径 |
langPath |
string[] |
['src/locales/en.ts'] |
其他语言文件的路径数组(打包时同步更新 Key) |
tempText |
string |
t |
模板中生成的国际化函数名 |
jsText |
string |
t |
JS/TS 脚本中生成的国际化函数名 |
regi18n |
string |
useI18n |
用于判断文件是否已引入国际化钩子的标识符 |
injectToJS |
string |
(详见说明) | 自动注入到 Script 顶部的引入代码 |
excludes |
string[] |
['locale', 'useI18n'] |
排除的文件名或路径片段 |
delay |
number |
1000 |
开发环境下处理文件的防抖延迟(ms) |
reserveKeys |
string[] |
[] |
生产环境下需要保留(不被清理)的 Key |
runBuild |
boolean |
false |
打包时是否执行语言文件整理和同步 |
keyLength |
number |
16 |
生成 Key 的哈希长度 |
cryptoKey |
string |
i18n |
用于生成哈希的 HMAC 密钥 |
preText |
string |
'' |
生成 Key 前在原文前增加的固定前缀 |
cleanUnusedKeys |
boolean |
true |
是否在写入语言文件前自动删除代码中未使用、且不在 reserveKeys 中的 Key |
插件内部使用 Map 维护语言映射,写入语言文件时会按加载和新增的插入顺序输出 Key。开发环境会先读取 i18nPath 中已有内容,再把新识别到的中文追加到末尾。
cleanUnusedKeys 默认为 true,插件会根据当前扫描到的代码引用清理语言文件中未使用的 Key。如果你的项目里有运行时动态拼接的 Key、服务端下发的 Key、或暂时不在代码中出现但仍需要保留的 Key,请使用 reserveKeys 保留,或者将 cleanUnusedKeys 设置为 false。
RollupI18nCreatePlugin({ cleanUnusedKeys: false, reserveKeys: ['dynamic_title', 'server_message'] })
你可以先在插件项目中构建并运行测试:
npm run build npm test
然后在业务项目中使用本地版本联调,推荐以下两种方式。
在插件项目根目录执行:
npm run build npm link
在你的业务项目根目录执行:
npm link rollup-i18n-auto-create-plugin
之后业务项目的 vite.config.ts 仍然正常引入包名即可。每次修改插件源码后,需要回到插件项目重新执行:
npm run build
然后重启业务项目的 Vite 开发服务。
在业务项目的 package.json 中临时指定本地路径:
{
"devDependencies": {
"rollup-i18n-auto-create-plugin": "file:../rollup-i18n-auto-create-plugin"
}
}然后重新安装依赖:
npm install
这种方式更接近真实安装包行为。修改插件后同样需要先在插件项目执行 npm run build,再在业务项目重新安装或刷新依赖。
@vue/compiler-sfc 解析 .vue 文件,使用 Babel (@babel/parser) 解析 JS/TS/JSX 代码。preText + cryptoKey 生成唯一哈希作为 Key。i18nPath 指定的文件,并按插入顺序写回。@ 的文本自动转义为 @@,防止 vue-i18n 报错。t('key') 调用。cleanUnusedKeys 为 true 时,写入前会删除未被当前代码引用、且不在 reserveKeys 中的 Key。cleanUnusedKeys 默认开启,首次在老项目中使用前建议先提交或备份语言文件,避免误删动态 Key。@ 符号,确保在 vue-i18n 中能正常渲染为原样文本。t('key') 代码还原回中文,可以参考 src/migrate.ts 迁移脚本。如果你需要将一个已经手动写满 t('key') 的老项目转化回中文(以便配合本插件使用),可以使用 src/migrate.ts 脚本。
该脚本已进行优化,支持:
src 目录下的所有 .vue, .ts, .js, .tsx, .jsx 文件。{{ t('key') }} 还原为中文。:title="t('key')" 还原为静态属性 title="中文"(原版文档中提到的无法转化的问题已解决)。t('key') 调用还原为字符串 '中文'。使用说明:
由于每个项目的路径配置不同,请在使用前修改 src/migrate.ts 中的 options 配置(如语言包路径、源码目录等)。
MIT