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

一、工具介绍

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

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

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

github地址:github.com/qianyuanjia...

安装步骤

  1. 安装npm包:
arduino 复制代码
npm i i18n-auto-extractor
  1. 在项目根目录运行命令生成配置文件:
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. 自动翻译

工具会:

  1. 提取所有中文文案
  2. 通过谷歌翻译API翻译成配置中的目标语言
  3. 生成对应的语言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/原生项目‌:建议切换语言后刷新页面

五、注意事项

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

六、总结

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

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

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

相关推荐
泷羽Sec-静安3 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端14 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49615 分钟前
Web Components简介及如何使用
前端·javascript·html
jump68022 分钟前
TS中 unknown 和 any 的区别
前端
无羡仙30 分钟前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊1 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李3 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡3 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html