寻找可提取React项目i18next翻译密钥的插件

当然有，i18next生态里提供了专门的工具，能像Flask-Babel那样自动扫描代码中的翻译密钥，生成统一的翻译文件，下面是两个最常用的工具及使用方法：

1. i18next-scanner #

这是通用型的提取工具，支持扫描多种文件类型，适配i18next的各类用法。

• 安装：

  npm install i18next-scanner --save-dev
  # 或用yarn
  yarn add i18next-scanner -D
  

• 配置：
  在项目根目录创建i18next-scanner.config.js，示例配置可根据项目结构调整：

  const fs = require('fs');
  const path = require('path');
  const { promisify } = require('util');
  const readFile = promisify(fs.readFile);
  const writeFile = promisify(fs.writeFile);
  
  module.exports = {
    input: [
      'src/**/*.{js,jsx,ts,tsx}', // 扫描所有React组件文件
      '!src/**/*.test.{js,jsx,ts,tsx}', // 排除测试文件
    ],
    output: './public/locales', // 翻译文件输出目录
    options: {
      sort: true,
      func: {
        list: ['i18next.t', 'i18n.t', 't'], // 指定要扫描的翻译函数名
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      lngs: ['en', 'zh-CN'], // 项目支持的语言列表
      defaultLng: 'en',
      defaultNs: 'translation',
      resource: {
        loadPath: './public/locales/{{lng}}/{{ns}}.json',
        savePath: './public/locales/{{lng}}/{{ns}}.json',
        jsonIndent: 2,
      },
      keySeparator: '.', // 密钥层级分隔符
      nsSeparator: ':', // 命名空间分隔符
    },
    transform: async function customTransform(file, enc, done) {
      const content = await readFile(file.path, enc);
      const parser = this.parser;
      parser.parseFuncFromString(content, { list: ['t'] }, (key, options) => {
        parser.set(key, options);
      });
      done();
    },
  };
  

• 使用：
  在package.json的scripts中添加命令：

  "scripts": {
    "extract:i18n": "i18next-scanner --config i18next-scanner.config.js"
  }
  

运行npm run extract:i18n，工具会自动扫描指定文件中的翻译函数调用，提取密钥并生成对应语言的JSON文件，未翻译内容会用密钥本身作为默认值。

2. @react-i18next/cli #

这是react-i18next官方提供的CLI工具，对React项目适配更友好，能识别<Trans>组件中的翻译内容。

• 安装：

  npm install @react-i18next/cli --save-dev
  

• 配置：
  在根目录创建i18next-parser.config.js：

  module.exports = {
    locales: ['en', 'zh-CN'],
    output: 'public/locales',
    input: ['src/**/*.{js,jsx,ts,tsx}'],
    defaultValue: (locale, namespace, key) => key,
    keySeparator: '.',
    nsSeparator: ':',
    func: {
      list: ['t', 'i18next.t', 'i18n.t'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    trans: {
      component: 'Trans',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      fallbackKey: (ns, value) => {
        return value
          .replace(/\s+/g, '-')
          .toLowerCase()
          .replace(/[^a-z0-9-]/g, '');
      },
    },
  };
  

• 使用：
  在package.json的scripts中添加：

  "scripts": {
    "extract:i18n": "i18next"
  }
  

运行命令后，工具会同时提取t()函数和<Trans>组件里的翻译文本，生成结构化的翻译文件，且会保留已有的翻译内容，仅新增或更新新密钥。

注意事项 #

• 确保input路径覆盖所有包含翻译密钥的文件，排除测试文件、第三方依赖等无关文件
• 如果项目中使用了自定义翻译函数名，需在配置的func.list中添加对应名称，否则工具无法识别
• 工具会自动合并现有翻译文件，不会覆盖已完成的翻译内容

内容的提问来源于stack exchange，提问作者Mormen