Grafana React插件中i18next-scanner无法生成翻译JSON键

1. i18next-scanner API 使用方式错误 #

你当前直接调用scanner({...})的写法不符合Node.js API规范，i18next-scanner需要通过文件遍历+流处理的方式解析目标文件，而非直接传入配置对象。

2. 缺少 TypeScript/TSX 文件解析支持 #

默认情况下i18next-scanner无法识别TypeScript语法，需要添加Babel预设来转换TS/TSX文件为可解析的JS代码。

3. 未配置自定义识别规则 #

需要明确指定扫描器识别useTranslation返回的t函数，确保能捕获到组件中的翻译键。

具体修复步骤 #

步骤1：安装必要依赖

npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react glob i18next-scanner@latest

步骤2：修正i18n.config.js配置

替换原配置为以下内容：

const glob = require('glob');
const fs = require('fs');
const path = require('path');
const scanner = require('i18next-scanner');
const { transform } = require('@babel/core');

// 转换TS/TSX文件为可解析的JS代码
const transformTSFile = (content, filePath) => {
  if (filePath.match(/\.(ts|tsx)$/)) {
    const result = transform(content, {
      presets: ['@babel/preset-typescript', '@babel/preset-react'],
      filename: filePath,
    });
    return result.code;
  }
  return content;
};

const scannerOptions = {
  debug: true,
  removeUnusedKeys: true,
  sort: true,
  lngs: ['en', 'de'],
  ns: ['translation'], // 与i18n.ts中的ns配置保持一致
  nsSeparator: ':',
  keySeparator: '.',
  defaultValue: '',
  // 配置识别t函数的规则
  func: {
    list: ['t'],
    extensions: ['.ts', '.tsx'],
  },
  // 识别Trans组件的规则（如果用到的话）
  trans: {
    component: 'Trans',
    extensions: ['.tsx'],
  },
};

// 遍历所有目标文件并扫描翻译键
glob.sync('./src/**/*.{ts,tsx}').forEach(filePath => {
  const rawContent = fs.readFileSync(filePath, 'utf8');
  const processedContent = transformTSFile(rawContent, filePath);
  
  const scannerInstance = scanner(scannerOptions);
  scannerInstance.write({ path: filePath, contents: processedContent });
  scannerInstance.end();
  
  // 将扫描结果写入JSON文件
  scannerInstance.pipe(scanner.writeToDisk('./src/locales/{{lng}}/{{lng}}.json'));
});

步骤3：重新执行扫描命令

npm run i18n:scan

额外检查项 #

• 确认src/locales/en和src/locales/de目录已存在，若不存在需手动创建
• 检查组件中t函数的调用格式是否符合配置的分隔符（当前用.作为键分隔符，header.part0是合法格式）
• 确保i18n.ts中的resources配置与扫描输出的文件路径完全匹配

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