reactjs - React - 每个组件的翻译

Question

我正在为我的 React 应用程序使用 create-react-app，目前正在尝试找出翻译。

现在，我每个语言环境都有一个大的 JSON 文件，并且每个语言环境文件都包含所有组件的翻译 - 这并不理想，我希望每个组件都有单独的翻译文件。

因此语言环境的结构将如下所示:组分A- 语言环境 - en.json - sk.json

组件B- 语言环境 - en.json - sk.json

实现这一目标的最佳方法是什么？我应该使用哪些模块来实现这一目标？

我不想将这些语言环境文件包含到构建中，因为我们将支持 10 种语言，因此包大小会太大。

Answer 1

我要回答我自己的问题。经过研究，我发现我的用例很少见，因此我决定进行一些区域设置预处理以实现所需的功能。

我正在运行 create-react-app 和 react-i18next 的默认配置，我的文件结构如下所示:

src
  - Component A
    - locales
      - en.json
      - sk.json
  - Component B
    - locales
      - en.json

以下是 react-i18next 模块的设置:

i18n
  .use(Backend)
  .use('en')
  .use(reactI18nextModule)
  .init({
    fallbackLng: 'en',
    debug: false,
    backend: {
      loadPath: function() {
        return `${config.BASE_URL}locales/{{lng}}.json`;
      }
    },
    react: {
      wait: true
    }
  });

由于我使用的是 create-react-app 的默认配置，因此区域设置从应用程序中的 public 文件夹提供并​​自行构建。

现在事情变得棘手了。由于语言环境文件位于组件树中(而不是公共(public)文件夹中)，因此我们需要对语言环境进行一些预处理 - 基本上我们需要连接所有 JSON 文件并将它们移动到公共(public)文件夹中。

公共(public)文件夹的文件是使用下面的节点任务 (prepare-locales.js) 动态创建的:

const jsonConcat = require('json-concat');
const minifyJson = require('minify-json');
const glob = require('glob');
const availableLocales = ['en', 'sk'];
const path = require('path');

module.exports.development = function() {
  availableLocales.forEach(locale => {
    glob(`./src/**/locales/${locale}.json`, {}, (err, globFiles) => {
      if (globFiles.length) {
        const file = `./public/locales/${locale}.json`;

        jsonConcat(
          {
            src: globFiles,
            dest: file
          },
          json => {
            minifyJson(file);
          }
        );
      }
    });
  });
};

module.exports.production = function() {
  glob('./build/static/js/main.*.js', {}, (err, globFiles) => {
    const files = require('source-map-explorer')(globFiles[0]).files;

    let localeFolders = [];
    Object.keys(files).forEach(fileName => {
      localeFolders.push(path.dirname(fileName).replace('./', ''));
    });
    localeFolders = [...new Set(localeFolders)];

    availableLocales.forEach(locale => {
      const localeFiles = localeFolders.map(
        lf => `./src/${lf}/locales/${locale}.json`
      );

      if (localeFiles.length) {
        const file = `./build/locales/${locale}.json`;

        jsonConcat(
          {
            src: localeFiles,
            dest: file
          },
          json => {
            minifyJson(file);
          }
        );
      }
    });
  });
};

对于开发版本，我将连接树中找到的所有 JSON 文件。

对于生产版本，我使用 source-map-explorer 并且仅连接构建中使用的那些区域设置。

这是我的简化的package.json，其中包含执行此操作所需的任务:

{
  "devDependencies": {    
    "json-concat": "0.0.1",
    "minify-json": "^1.0.0",
    "npm-watch": "^0.4.0",
    "path": "^0.12.7",
    "react-scripts": "2.1.1",
    "source-map-explorer": "^1.6.0"
  },
  "scripts": {    
    "start": "react-scripts start & npm run prepare-locales:development:watch",
    "build:production": "react-scripts build && npm run prepare-locales:production",    
    "prepare-locales:development:watch": "npm-watch prepare-locales:development",
    "prepare-locales:development": "node -e 'require(\"./prepare-locales.js\").development()'",
    "prepare-locales:production": "node -e 'require(\"./prepare-locales.js\").production()'"
  },
  "watch": {
    "prepare-locales:development": {
      "patterns": "src/**/locales/",
      "extensions": "json"
    }
  }  
}

也许这不是最好的解决方案，但它适用于我的用例，希望它能帮助遇到类似问题的人。