🌍 解放双手！i18n-auto-extractor：前端国际化从此告别手动搬砖 🚀

浮幻云月
4,525 阅读4分钟

还在为项目国际化而头疼吗？每次新增中文文案都要手动翻译、维护多语言文件？每次查找一个文案都要先获取key，再手动搜索？文案有时候不用了也不方便删除，越积越多？试试这个让你效率翻10倍的神器！

🔥 为什么选择 i18n-auto-extractor？

一句话介绍：一个能自动扫描、提取、翻译中文文案的全能国际化工具，让你的项目秒变多语言！

✨ 核心优势

  • ⚡ 一键自动化：从提取到翻译全程自动化，解放你的双手
  • 🏗 全栈兼容：Vue、React、原生项目通吃
  • 🌐 百国语言：支持上百种语言翻译（基于谷歌翻译）
  • 📦 零负担：极轻量级，不增加项目体积
  • ⚙️ 支持只提取中文：只提取出中文json，然后扔给ai自动翻译，这也许是更好的选择
  • ➕ 支持使用百度翻译：谷歌翻译是默认翻译器，主要是它不需要额外配置，也可使用百度翻译，需要获取apikey和密钥
  • ➕ 支持CSV文件导入导出：可以将翻译json文件导出为csv，修改后重新导入

立即体验：

npm i i18n-auto-extractor
npx i18n-auto-extractor

🚀 3分钟快速上手

  1. 安装配置
    安装执行命令，工具会自动生成配置文件：

    npm i i18n-auto-extractor
npx i18n-auto-extractor init

  2. 标记中文
    用$at()包裹要翻译的文案：

    $at('欢迎来到我的网站')

  3. 提取并翻译
    安装执行命令，工具会自动生成配置文件：

    npx i18n-auto-extractor at

  4. 自动生成
    运行命令后，你将得到：

    locales/
├─ zh.json (原始中文)
├─ en.json (自动翻译)
├─ fr.json (自动翻译)

💡 超智能功能

🎯 精准提取

  • 自动识别项目中的中文文案
  • 智能排除代码注释和变量

🔄 实时同步

// 动态切换语言
setCurrentLang('en', enJSON) // 立即生效！

🛠 多框架支持

Vue3项目示例
<script setup>
import {useVueAt} from 'i18n-auto-extractor/vue'
import {$at} from 'i18n-auto-extractor'
import enJSON from '@/locales/en'

const {setCurrentLang} = useVueAt()

setTimeout(() => {
  setCurrentLang('en', enJSON)
}, 3000);
</script>

<template>
  <div>{{$at('你好')}}</div>
</template>

Vue2项目示例

main.js引入i18nAtPlugin插件

import { i18nAtPlugin } from 'i18n-auto-extractor/dist/esm/vue2.mjs'

Vue.use(i18nAtPlugin,{
  langSet:{
    lang:'zh-CN', // 可以初始化为其他语言
    langMap:{}
  }
})

<template>
  <div>
   <div>{{langSet.lang}}</div>
   <div>{{$at('你好')}}</div>
   <div>{{$at('确定')}}</div>
  </div>
</template>
<script>
import enJSON from '../../locales/en'

export default {
  name: 'App',
  mounted() {
    setTimeout(() => {
     this.setCurrentLang('en',enJSON)
    }, 3000);
  }
}
</script>
React项目示例
import {useReactAt} from 'i18n-auto-extractor/react'
import enJSON from '../../locales/en.json'

function App() {
  const {setCurrentLang,$at,langSet}= useReactAt()

  useEffect(()=>{
    setTimeout(() => {
      setCurrentLang('en',enJSON)
    }, 3000);
  },[setCurrentLang])

  return <>{$at('你好')}</>
}
与现有多语言体系集成

如果你的项目中已经用了vue-i18n等方案，也不影响后续增量文案使用本插件。后续文案只需要用$at包裹，并且在切换语言的时候把i18n-auto-extractor的当前语言也跟着一起切换即可。

🏆 为什么要用这个工具？

传统方式i18n-auto-extractor
手动提取文案✅ 自动扫描
人工翻译✅ 谷歌API自动翻译
手动维护多语言文件✅ 自动生成&更新
每个文件单独引入✅ 支持自动导入
仅支持单一框架✅ 全框架通杀

📈 性能数据

  • 扫描速度：每秒处理50+文件
  • 翻译准确率：常用语达95%+
  • 包体积：< 100kb

🎁 最佳实践

  1. 大项目优化：配合Vite自动导入功能 
    // vite.config.js
 AutoImport({
   imports: [{
     'i18n-auto-extractor': ['$at']
   }],
   dts: 'types/auto-import.d.ts',
   vueTemplate: true
 })
  2. 修改翻译后的文案
  • 翻译后的文案有时候不满足，需要手动修改，可以直接修改json文件
  • 因为是增量翻译，不用担心被覆盖，除非手动将翻译记录删除，才会重新翻译
{
  "7eca689f0d": "Hello",
  "76687749ee": "What's the weather like today?", // 直接更改翻译文案
  "38cf16f220": "Sure"
}
  1. 自定义翻译
  • 通过override配置支持覆盖指定语言场景下的翻译，如下确定文案在英文中的一词多译，
  • override作为内容的保留属性，在参数化翻译中不要使用
  • 在vue模板语法中注意对象字面量书写规则，'}}'写成'} }'
   <div>{{$at('确定')}}</div>
   <div>{{ $at('确定', { override: { en: 'ok' } }) }}</div>
   <div>{{ $at('确定', { override: { en:'confirm' } }) }}</div>
  1. CI/CD集成：添加到你的构建流程,在构建前执行 npx i18n-auto-extractor

⚠️ 注意事项

  • 文案必须是静态字符串（不能包含变量）
  • 中文变更会导致对应翻译被重置（建议用Git管理）

🎯 适用场景

  • 已有中文项目需要快速国际化
  • 需要支持多语言的初创项目
  • 维护大型多语言应用

🙋 常见问题

  1. 报翻译失败
    • 如果是谷歌翻译，一般是访问境外网络问题，或者是翻译文本超过限制，如果是后者，建议切换为百度翻译，需要开通百度翻译通用文本翻译功能， 后续少量增量文本依然可以使用谷歌翻译，改下配置文件的translateBy，切换翻译器类型即可
    • 如果是百度翻译，请检查是否是超过翻译额度了, 或者语言类型不支持，谷歌的翻译语种比百度多
  2. 遇到其他问题可以去github提issue,带上相关描述或者报错截图，及时帮您解决

📌 立即开始

npm i i18n-auto-extractor
npx i18n-auto-extractor

GitHub：github.com/qianyuanjia…
npm：www.npmjs.com/package/i18…

🎉 从此告别国际化搬砖，专注创造有价值的功能！

💡 小贴士：你的下一个国际化项目将节省80%的时间！

avatar
文章
阅读
粉丝