i18n-extract

一个用于提取代码中中文文本并进行国际化处理的工具。

功能特性

• 🔍 自动扫描指定目录下的所有文件
• 📝 提取代码中的中文文本
• 🔄 支持 Vue i18n 的 $t() 格式和 React 的 ${} 格式
• 📄 生成包含所有中文文本的 JSON 映射文件
• ⚙️ 支持灵活的配置选项
• 🌍 支持多种文件类型（JS, TS, JSX, TSX, Vue等）

安装

全局安装

npm install -g i18n-extract

本地安装

npm install i18n-extract --save-dev

使用方法

1. 创建配置文件

在项目根目录创建 i18n-extract.config.js 文件：

module.exports = {
  // 入口目录，从这里开始查找文件
  entry: './src',
  
  // 输出目录，生成的JSON文件将保存在这里
  output: './i18n',
  
  // 要处理的文件类型（支持glob模式）
  include: [
    '**/*.js',
    '**/*.jsx',
    '**/*.ts',
    '**/*.tsx',
    '**/*.vue'
  ],
  
  // 要排除的文件或目录
  exclude: [
    'node_modules/**',
    'dist/**',
    'build/**',
    '*.min.js'
  ],
  
  // 生成的key前缀
  keyPrefix: 'key_',
  
  // 输出的JSON文件名
  outputFileName: 'zh.json',
  
  // 替换格式：'vue' 使用 $t() 格式，'react' 使用 ${} 格式
  replaceFormat: 'vue',
  
  // Vue项目模式配置（仅在replaceFormat为'vue'时有效）
  legacy: true
};

2. 运行工具

# 使用默认配置文件
i18n-extract

# 指定配置文件
i18n-extract -c custom.config.js

# 通过命令行参数覆盖配置
i18n-extract -e ./src -o ./locales

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | entry | string | './src' | 入口目录路径 | | output | string | './i18n' | 输出目录路径 | | include | string[] | ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.vue'] | 要处理的文件模式 | | exclude | string[] | ['node_modules/**', 'dist/**', 'build/**', '*.min.js'] | 要排除的文件模式 | | keyPrefix | string | 'key_' | 生成的键名前缀 | | outputFileName | string | 'zh.json' | 输出的JSON文件名 | | replaceFormat | string | 'vue' | 替换格式，支持 'vue' 和 'react' | | legacy | boolean | true | Vue项目模式：true为Vue 2风格(Options API)，false为Vue 3风格(Composition API)。当为false时，会自动为JS/TS文件添加useI18n导入 |

示例

处理前的代码

// src/components/Hello.js
function sayHello() {
  console.log('你好，世界！');
  alert('欢迎使用i18n工具');
  return '处理完成';
}

const messages = {
  error: '发生错误',
  success: '操作成功'
};

处理后的代码

// src/components/Hello.js
function sayHello() {
  console.log('${key_001}');
  alert('${key_002}');
  return '${key_003}';
}

const messages = {
  error: '${key_004}',
  success: '${key_005}'
};

生成的JSON文件

Vue 单文件组件

Vue 2 模式 (legacy: true)

处理前：

<template>
  <div>
    <h1>用户管理</h1>
    <el-button @click="save">保存</el-button>
    <input placeholder="请输入用户名" />
    <p>操作成功</p>
  </div>
</template>

<script>
export default {
  methods: {
    save() {
      this.$message.success('保存成功！');
      console.log('开始保存...');
    }
  }
}
</script>

处理后：

<template>
  <div>
    <h1>{{ $t('key_001') }}</h1>
    <el-button @click="save">{{ $t('key_002') }}</el-button>
    <input :placeholder="$t('key_003')" />
    <p>{{ $t('key_004') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    save() {
      this.$message.success(this.$t('key_005'));
      console.log(this.$t('key_006'));
    }
  }
}
</script>

Vue 3 模式 (legacy: false)

处理前：

<template>
  <div>
    <h1>用户管理</h1>
    <el-button @click="save">保存</el-button>
    <input placeholder="请输入用户名" />
  </div>
</template>

<script setup>
const save = () => {
  console.log('保存成功！');
};
</script>

处理后：

<template>
  <div>
    <h1>{{ t('key_001') }}</h1>
    <el-button @click="save">{{ t('key_002') }}</el-button>
    <input :placeholder="t('key_003')" />
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const save = () => {
  console.log(t('key_004'));
};
</script>

生成的JSON文件

{
  "key_001": "用户管理",
  "key_002": "保存", 
  "key_003": "请输入用户名",
  "key_004": "保存成功！"
}

JavaScript/TypeScript 文件 (Vue 3 模式)

处理前：

import { ref } from 'vue';
import axios from 'axios';

export function useUserApi() {
  const login = async (username, password) => {
    console.log('登录成功');
    alert('欢迎回来！');
    throw new Error('用户名或密码错误');
  };
}

处理后：

import { ref } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

export function useUserApi() {
  const login = async (username, password) => {
    console.log(t('key_001'));
    alert(t('key_002'));
    throw new Error(t('key_003'));
  };
}

命令行选项

i18n-extract [options]

Options:
  -c, --config <path>   config file path (default: "i18n-extract.config.js")
  -e, --entry <path>    entry directory path
  -o, --output <path>   output directory path
  -h, --help            display help for command
  -V, --version         display version number

注意事项

1. 工具会直接修改源文件，建议使用前先备份代码或确保代码已提交到版本控制系统
2. 工具只处理字符串字面量中的中文，不会处理注释中的中文
3. 已经被替换过的变量（包含 ${ 的字符串）不会被重复处理
4. 生成的JSON文件如果已存在，新的内容会与现有内容合并
5. Vue项目配置说明：
   • legacy: true：适用于Vue 2项目，使用Options API风格，在模板中生成{{ $t() }}，在script中生成this.$t()
   • legacy: false：适用于Vue 3项目，使用Composition API风格，在模板中生成{{ t() }}，在script中生成t()，并自动添加import { useI18n } from 'vue-i18n'导入
   • JS/TS文件支持：当legacy: false时，对于.js、.ts、.jsx、.tsx文件，如果包含import语句，工具会自动添加import { useI18n } from 'vue-i18n'和const { t } = useI18n()

许可证

MIT