AutoI18n

🌍 AI驱动的Vue和React项目国际化自动翻译工具

简介

AutoI18n是一个强大的自动化国际化工具，专为Vue和React项目设计。它能够：

• 🔍 智能提取：自动从Vue/React源代码中提取可翻译文本
• 🤖 AI翻译：集成OpenAI、Claude等大模型进行高质量翻译
• 📁 多格式支持：生成JSON、YAML、Properties格式的i18n资源文件
• 🔄 自动替换：将源代码中的硬编码文本替换为i18n调用
• ⚙️ 灵活配置：支持多种配置方式和自定义选项

特性

🎯 智能文本提取

• 支持Vue单文件组件（.vue）
• 支持React组件（.jsx, .tsx, .js, .ts）
• 智能识别模板文本、JSX文本、字符串字面量
• 自动排除注释和代码片段

🌐 多语言翻译

• 集成OpenAI GPT模型
• 支持Claude AI
• 可扩展的自定义翻译器
• 批量翻译优化

📄 多格式输出

• JSON格式（嵌套/扁平结构）
• YAML格式
• Properties格式
• 自定义键名规则（驼峰、下划线、短横线）

🔧 自动代码替换

• Vue: {{ $t('key') }} 或 t('key')
• React: {t('key')} 或 t('key')
• 自动添加i18n导入语句
• 支持试运行模式

安装

全局安装

npm install -g auto-i18n

项目安装

npm install auto-i18n --save-dev

快速开始

1. 初始化配置

auto-i18n init

这将创建一个 auto-i18n.config.json 配置文件：

{
  "sourceDir": "./src",
  "outputDir": "./locales",
  "targetLanguages": ["en", "zh-CN"],
  "sourceLanguage": "zh-CN",
  "translator": {
    "type": "openai",
    "apiKey": "${OPENAI_API_KEY}",
    "baseURL": "https://api.openai.com/v1",
    "model": "gpt-3.5-turbo"
  },
  "generator": {
    "type": "json",
    "nested": true,
    "keyCase": "camelCase"
  },
  "exclude": ["node_modules", "dist", "build"],
  "include": ["**/*.{vue,js,jsx,ts,tsx}"]
}

2. 设置API密钥

# 设置环境变量
export OPENAI_API_KEY="your-api-key-here"

# 或者直接在配置文件中设置

3. 运行完整流程

auto-i18n run

命令行使用

分步执行

提取文本

auto-i18n extract

翻译文本

auto-i18n translate

生成资源文件

auto-i18n generate

替换源代码

# 试运行（不修改文件）
auto-i18n replace --dry-run

# 实际替换
auto-i18n replace

命令选项

# 指定配置文件
auto-i18n run -c ./my-config.json

# 指定源目录和输出目录
auto-i18n run -s ./src -o ./i18n

# 指定目标语言
auto-i18n run -l "en,fr,de"

# 指定输出格式
auto-i18n run -f yaml

# 显示详细日志
auto-i18n run -v

# 试运行模式
auto-i18n run --dry-run

配置详解

基础配置

| 字段 | 类型 | 默认值 | 描述 | |------|------|--------|------| | sourceDir | string | "./src" | 源代码目录 | | outputDir | string | "./locales" | 输出目录 | | targetLanguages | string[] | ["en"] | 目标语言列表 | | sourceLanguage | string | "zh-CN" | 源语言 |

翻译器配置

OpenAI配置

{
  "translator": {
    "type": "openai",
    "apiKey": "sk-...",
    "baseURL": "https://api.openai.com/v1",
    "model": "gpt-3.5-turbo"
  }
}

Claude配置

{
  "translator": {
    "type": "claude",
    "apiKey": "sk-ant-...",
    "baseURL": "https://api.anthropic.com",
    "model": "claude-3-sonnet-20240229"
  }
}

自定义翻译器

{
  "translator": {
    "type": "custom",
    "apiKey": "your-api-key",
    "baseURL": "https://your-api.com",
    "headers": {
      "Authorization": "Bearer ${API_KEY}"
    }
  }
}

生成器配置

| 字段 | 类型 | 可选值 | 描述 | |------|------|--------|------| | type | string | json, yaml, properties | 输出格式 | | nested | boolean | true, false | 是否使用嵌套结构 | | keyCase | string | camelCase, snake_case, kebab-case | 键名格式 |

文件过滤

{
  "include": ["**/*.{vue,js,jsx,ts,tsx}"],
  "exclude": ["node_modules", "dist", "build", "**/*.test.*"]
}

使用示例

Vue项目示例

原始代码

<template>
  <div>
    <h1>欢迎使用我们的应用</h1>
    <p>这是一个示例页面</p>
    <button>点击我</button>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      message: '你好，世界！'
    }
  }
}
</script>

处理后代码

<template>
  <div>
    <h1>{{ $t('welcomeToOurApp') }}</h1>
    <p>{{ $t('thisIsASamplePage') }}</p>
    <button>{{ $t('clickMe') }}</button>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      message: this.$t('helloWorld')
    }
  }
}
</script>

生成的资源文件

locales/en.json

{
  "welcomeToOurApp": "Welcome to our application",
  "thisIsASamplePage": "This is a sample page",
  "clickMe": "Click me",
  "helloWorld": "Hello, World!"
}

locales/zh-CN.json

{
  "welcomeToOurApp": "欢迎使用我们的应用",
  "thisIsASamplePage": "这是一个示例页面",
  "clickMe": "点击我",
  "helloWorld": "你好，世界！"
}

React项目示例

原始代码

import React from 'react';

function HomePage() {
  const message = '欢迎来到React应用';
  
  return (
    <div>
      <h1>主页</h1>
      <p>{message}</p>
      <button>开始使用</button>
    </div>
  );
}

export default HomePage;

处理后代码

import React from 'react';
import { useTranslation } from 'react-i18next';

function HomePage() {
  const { t } = useTranslation();
  const message = t('welcomeToReactApp');
  
  return (
    <div>
      <h1>{t('homePage')}</h1>
      <p>{message}</p>
      <button>{t('getStarted')}</button>
    </div>
  );
}

export default HomePage;

高级用法

编程式API

import { 
  ParserFactory, 
  TranslatorFactory, 
  GeneratorFactory,
  ReplacerFactory 
} from 'auto-i18n';

// 解析文件
const parser = ParserFactory.getParser('./src/App.vue');
const result = await parser.parse('./src/App.vue', content);

// 翻译文本
const translator = TranslatorFactory.createTranslator('openai', config);
const translated = await translator.translate(items, 'en', config);

// 生成资源文件
const generator = GeneratorFactory.createGenerator('json', config);
await generator.generate(translationResult, config);

// 替换源代码
const replacer = ReplacerFactory.createReplacer(FileType.VUE);
const replacements = await replacer.replace(parseResult, items);

自定义翻译器

import { BaseTranslator } from 'auto-i18n';

class MyTranslator extends BaseTranslator {
  async translateBatch(items, targetLanguage, config) {
    // 实现自定义翻译逻辑
    return translatedItems;
  }
}

自定义生成器

import { BaseGenerator } from 'auto-i18n';

class MyGenerator extends BaseGenerator {
  async generateForLanguage(language, translations, config) {
    // 实现自定义生成逻辑
  }
}

常见问题

Q: 如何处理动态文本？

A: 对于包含变量的文本，工具会自动识别并保留插值语法：

// 原始
const message = `你好，${name}！`;

// 处理后
const message = t('helloName', { name });

Q: 如何排除特定文件？

A: 在配置文件中使用 exclude 选项：

{
  "exclude": ["**/*.test.*", "**/mock/**", "src/legacy/**"]
}

Q: 如何自定义键名生成规则？

A: 使用 keyCase 配置：

{
  "generator": {
    "keyCase": "snake_case"  // 或 "kebab-case", "camelCase"
  }
}

Q: 翻译质量不满意怎么办？

A: 可以：

1. 调整翻译模型（如使用GPT-4）
2. 在配置中添加上下文信息
3. 手动编辑生成的翻译文件
4. 使用自定义翻译器

贡献

欢迎提交Issue和Pull Request！

开发环境设置

# 克隆项目
git clone https://github.com/your-username/auto-i18n.git
cd auto-i18n

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

许可证

MIT License

更新日志

v1.0.0

• 🎉 首次发布
• ✨ 支持Vue和React项目
• 🤖 集成OpenAI和Claude翻译
• 📁 支持多种输出格式
• 🔄 自动代码替换功能

如果这个工具对你有帮助，请给个⭐️支持一下！