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通过自动化流程大幅简化了前端国际化的工作量,特别适合:

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

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

相关推荐
宁雨桥12 分钟前
Service Worker:前端离线化与性能优化的核心技术
前端·性能优化
IT_陈寒23 分钟前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室35 分钟前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel1 小时前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪52 小时前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice2 小时前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸2 小时前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀5 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者10 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost11 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求