已弃用的 Webpack 的 i18n 插件和加载器的替代品答案

【问题标题】：Alternatives to deprecated Webpack's i18n plugin and loader已弃用的 Webpack 的 i18n 插件和加载器的替代品
【发布时间】：2020-05-27 19:14:12
【问题描述】：

我正在开发一个需要从 .json 文件加载翻译的 TypeScript 项目，其目的是为每个国家/地区提供一个语言文件。示例：en.json、es.json。

那么我应该能够使用 .ts 文件中的翻译，以及 __('red') 或其他扩展提供的一些功能。

那么最终编译的.js 文件应该包含所有翻译以“实时”切换语言。

json 文件的内容可能类似于：

es.json

{
    "colors": {
        "red": "rojo",
        "blue": "blue"
    }
}

目前推荐的（在文档中）用于 Webpack 的 i18n 加载器和插件似乎已被弃用：

插件：I18nWebpackPlugin
加载器：I18nLoader

我想知道使用此扩展程序是否安全，或者有一些可用的选项适合我的情况，我尝试了 i18next 和 i18next-loader，但它似乎不适用于我当前的设置，似乎与模块导入过程的工作方式有关。所以也许另一个支持 Webpack + TypeScipt 的轻量级替代品可以解决这个问题。

这是我当前的 package.json 依赖项

{
  "dependencies": {
    "animate.css": "^3.7.2",
    "i18next": "^19.1.0",
    "intl-tel-input": "^16.0.8",
    "uniq": "^1.0.1"
  },
  "devDependencies": {
    "@alienfast/i18next-loader": "^1.1.4",
    "@babel/core": "^7.7.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "gulp": "^4.0.2",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^2.2.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

【问题讨论】：

标签： javascript typescript webpack internationalization

【解决方案1】：

这个怎么样？ @zainulbr/i18n-webpack-plugin

这是从原来的i18n-webpack-plugin 分叉出来的，并固定支持webpack5。

用法与原来未维护的存储库相同。

【讨论】：

很高兴知道人们可以重振项目！

【解决方案2】：

你试过webpack-localize-assets-plugin吗？

它支持 Webpack 5，并且与已弃用的 i18n-webpack-plugin 相比具有一些优势：

一流的多语言环境支持
能够从 JSON 路径读取语言环境，以便您在更改时观察和重建
能够报告未使用的字符串键

【讨论】：