Grafana Framework React 应用程序中的 I18next-Scanner 未在 JSON 翻译文件中生成用于国际化的密钥

Question

在实现 i18next 国际化后，我将 i18next-scanner 添加到我的 Grafana 插件中。但是，当我运行命令

npm run node i18n.config.js

时，它不会在翻译 JSON 文件中自动为我生成所需的密钥。有谁知道我可能会错过什么？

这是我的 i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import en from './locales/en/en.json';
import de from './locales/de/de.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        translation: en,
      },
      de: {
        translation: de,
      },
    },
    ns: ['translation'],
  });

export default i18n;

我的 i18n.config.js

const scanner = require('i18next-scanner');

scanner({
  input: ['./src/**/*.ts', './src/**/*.tsx'],
  output: './src/locales/{{lng}}/{{lng}}.json',
  options: {
    debug: true,
    removeUnusedKeys: true,
    sort: true,
    lngs: ['en', 'de'],
    nsSeparator: ':',
    keySeparator: '.',
  },
  defaultValue: '',
});

我的 package.json 脚本用于运行它：

"scripts": {
    "i18n:scan": "node i18n.config.js",
}

在我的组件 .tsx 文件中，我使用的翻译如下：

import React, { useState } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';

import i18n from 'i18n';
import { useTranslation, Trans } from 'react-i18next';

const lngs: any = {
  en: { nativeName: 'English' },
  de: { nativeName: 'Deutsch' },
};

interface Props extends PanelProps<SimpleOptions> {}
    
export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
  const { t } = useTranslation();


  const [count, setCounter] = useState(0);
  return (
    <>
      <div
        className={cx(
          styles.wrapper,
          css`
            width: ${width}px;
            height: ${height}px;
          `
        )}
      >
        <header className="App-header">
          <div>
            <p>0- {t('header.part0')}</p>
              <p>1- {t('header.part1')}</p>
            {Object.keys(lngs).map((lng) => (
              <button
                key={lng}
                style={{
                  fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal',
                }}
                type="submit"
                onClick={() => {
                  i18n.changeLanguage(lng);
                  setCounter(count + 1);
                }}
              >
                {lngs[lng].nativeName}
              </button>
            ))}
          </div>
          <div>
            {/* the variable must be count */}
            <p>2- {t('header.part2')}</p>
            <i>{t('counter', { count })}</i>
          </div>             
        </header>
      </div>
    </>
  );
};

当我运行脚本时，它不会向我的 JSON 翻译文件添加任何键。有谁知道为什么？我没有收到任何错误消息；就好像它已执行但没有找到任何要执行的任务，并且我没有收到任何警告或错误。如果有人能指出我所缺少的内容，我将不胜感激。

干杯， 海龟

Answer 1

我找到了解决办法。我可以解决这个问题，将 i18n.config.js 文件更改为： i18next-scanner.config.js 以及里面的配置，例如：

// i18next-scanner.config.js

module.exports = {
  input: [
    'src/**/*.{ts,tsx}', // Specify the file types to scan (e.g., .js and .jsx)
  ],
  output: './',
  options: {
    debug: true, // Set to true for debugging output
    removeUnusedKeys: true, // Remove unused keys from translations files
    sort: true, // Sort keys in translation files
    func: {
      // The function names used for translation keys
      list: ['t', 'i18next.t', 'i18n.t'],
      extensions: ['.ts', '.tsx'],
    },
    lngs: ['en', 'de'], // List the languages you want to support
    defaultLng: 'en', // The default language
    resource: {
      // The path where translation files will be saved
      loadPath: '.src/locales/{{lng}}/{{ns}}.json',
      savePath: '.src/locales/{{lng}}/{{ns}}.json',
    },
  },
  ns: ['translation'], // Namespace for your translations
};

我正在 cli 中运行命令，例如：

npm run i18next-scanner

我删除/替换了上面发布的 package.json 中的旧脚本。

现在，我正在尝试弄清楚如何使其仅添加新密钥而不替换旧密钥。如果它确实取代了它们，我们就会失去这些值。