一键 i18n 国际化神库!适配 Vue、React!

🎯i18n-auto-extractor

用 $at() 包一层,剩下的交给机器人

  • 安装即可跑,零配置开箱即用

  • Vue、React、原生项目全部通吃

  • 内置谷歌翻译,支持 100+ 语言

  • 极小包体,运行时动态切换语言

使用 3 步走
复制代码
npm i -D i18n-auto-extractor
npx i18n-auto-extractor   # 生成配置文件
javascript 复制代码
// 代码里包一层即可
const title = $at('欢迎来到我的网站')

构建后会自动生成:

复制代码
locales/
├─ zh.json   // 原中文
├─ en.json   // 自动翻译
├─ fr.json   // ...

🎯auto-i18n-translation-plugins

连 $t() 都不用写,源码中文自动翻译

  • 完全零侵入,Babel 扫描无需改代码

  • Vite / Webpack / Rollup 插件形态全覆盖

  • Google、有道、百度翻译源任意切换

  • 增量构建,只翻译新增文案省流量

    npm i -D vite-auto-i18n-plugin@^1.0.23

使用示例(Vite)
复制代码
npm i -D vite-auto-i18n-plugin@^1.0.23
TypeScript 复制代码
// vite.config.ts
import viteAutoI18n from 'vite-auto-i18n-plugin'

export default defineConfig({
  plugins: [
    vue(),
    viteAutoI18n({
      targetLangList: ['en', 'ja', 'ko'],
      translator: new YoudaoTranslator({ appId: 'xxx', appKey: 'xxx' })
    })
  ]
})

构建完成后自动生成 lang/index.json,直接引入即可使用。

🎯i18n-cli

命令行一把梭,老项目 5 分钟上线多语言

  • CLI 一键扫描并替换中文为 t('xxx')

  • Excel 导入导出,翻译团队协作零门槛

  • 支持百度、谷歌、有道多翻译源

  • 增量模式仅处理新增文案,避免重复劳动

使用 2 步走
复制代码
npm i -g @ifreeovo/i18n-extract-cli
it --locales en,ja        # 全量翻译
it --incremental          # 仅增量

产物示例:

复制代码
// locales/zh-CN.json
{ "a1b2c3": "提交订单" }

// locales/en.json
{ "a1b2c3": "Submit Order" }

🎯 场景速选指南

场景 推荐工具 理由
新项目,想持续维护 i18n-auto-extractor 有侵入,但长期可维护
老项目 2 天上线英文版 auto-i18n-translation-plugins 完全不改动源码
需要产品/翻译团队介入 i18n-cli CLI + Excel 协作最顺畅

🏁 总结

  • 不想写 $t() → 选 auto-i18n-translation-plugins

  • 愿意包一层 $at() 换长期省心 → 选 i18n-auto-extractor

  • 命令行一把梭 + Excel 协作 → 选 i18n-cli

三款都是 MIT 开源 ,按场景挑一把梭,国际化再也不是体力活!

Github 地址

  • i18n-auto-extractor :https://github.com/qianyuanjia/i18n-auto-extractor

  • auto-i18n-translation-plugins :https://github.com/auto-i18n/auto-i18n-translation-plugins

  • i18n-cli :https://github.com/IFreeOvO/i18n-cli

相关推荐
静默回滚2 分钟前
iPhone照片电脑上打不开:HEIC解码从原理到WASM
前端
dsyyyyy110111 分钟前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
航飞光电市场经理26 分钟前
人员定位系统“全栈自研”技术解析:从射频前端到定位引擎的架构拆解
前端·架构
Apifox29 分钟前
Apifox 9 月更新|CLI 能力升级、GitLab 私有化部署接入与产品体验优化
前端·后端·测试
deli00730 分钟前
随机乱跳为什么能画出完美三角形:混沌游戏分形实验室
前端
Gizzap_Tech37 分钟前
国内官网增加英文版:URL、语言切换与 hreflang 怎么配置?
前端
剪刀石头布啊1 小时前
泛洪DFS、BFS
前端
qetfw1 小时前
Windows Server AD CS:根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊1 小时前
为什么React组件很少前缀,而vue的不少组件都有前缀
前端
剪刀石头布啊1 小时前
gird网格布局
前端