i18n中文提取自动翻译解决方案

一、工具介绍

i18n-auto-extractor是一款专为前端项目设计的国际化(i18n)自动化解决方案工具，它能自动提取项目中的中文文本并翻译成多种语言。这款工具具有以下核心特点：

‌极轻量级‌：不增加项目体积负担
‌全框架支持‌：兼容React、Vue及原生项目
‌自动化程度高‌：从提取到翻译一站式解决
‌多语言支持‌：借助谷歌翻译接口，支持上百种语言

npm包地址：www.npmjs.com/package/i18...

安装步骤

安装npm包：

arduino 复制代码

npm i i18n-auto-extractor

arduino 复制代码

npx i18n-auto-extractor

配置文件说明

生成的.i18n_extractor.json文件结构如下：

json 复制代码

{
  "langs": ["en", "fr"], // 目标语言列表(ISO代码)
  "scanPath": "src", // 扫描目录
  "fileType": "vue|ts|js|jsx|tsx", // 扫描文件类型
  "localePath": "src/locales", // 语言文件保存路径
  "keyCount": 10 // 翻译JSON的MD5 key长度
}

三、核心功能详解

1. 中文自动提取

工具会自动扫描项目中所有被$at函数包裹的中文文案，注意：

文案必须是静态字符串
不支持包含变量的动态文案

‌有效示例‌：

php 复制代码

$at('你好')
$at('你好{x}', {x: 'Jan'}) // 参数化翻译但不影响提取

2. 自动翻译

工具会：

提取所有中文文案
通过谷歌翻译API翻译成配置中的目标语言
生成对应的语言JSON文件

3. 多框架支持

Vue3项目示例

xml 复制代码

<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>

React项目示例

javascript 复制代码

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('你好')}</>
}

原生JS项目

xml 复制代码

<div id="textDisplay"></div>
<script src="../dist/umd/index.min.js"></script>
<script type="module">
  window.i18nExtractor.setCurrentLang('en', enJson)
  textDisplay.textContent = window.i18nExtractor.$at('你好')
</script>

4. 自动导入优化

推荐在Vite/Webpack项目中配置自动导入，避免每个文件手动引入$at：

php 复制代码

AutoImport({
  imports: [{
    'i18n-auto-extractor': ['$at']
  }],
  dts: 'types/auto-import.d.ts',
  vueTemplate: true
})

四、高级功能与最佳实践

1. 自定义翻译

如果对自动翻译结果不满意：

直接修改生成的翻译文件中的文案
注意：中文内容变更会导致对应的翻译自动清除
建议通过git对比前后差异，避免自定义文案被误删

2. 响应式更新

‌Vue ‌：$at返回值天然响应式
‌React ‌：useReactAt返回的$at已经过useCallback包裹

‌计算属性‌：

javascript 复制代码

const name = computed(() => {
  return $at('你好')
})

3. 语言切换策略

‌SPA项目 ‌：直接调用setCurrentLang更新
‌MPA/原生项目‌：建议切换语言后刷新页面

五、注意事项

文案中不能包含变量，必须是静态字符串
中文变更会导致对应翻译被清除，需注意版本控制
首次使用需要配置谷歌翻译API
React支持相对Vue较少，遇到问题可联系作者

六、总结

i18n-auto-extractor通过自动化流程大幅简化了前端国际化的工作量，特别适合：

已有中文项目需要快速国际化的团队
希望减少国际化手动工作量的开发者
需要支持多框架的统一国际化方案

其轻量级设计和自动化特性使其成为前端国际化领域的实用工具，值得在下一个项目中尝试！