webpack surviveJS

国际化

国际化 (i18n) 这本身就是一个很大的话题。最广泛的定义与将用户界面转换为其他语言相关。 本地化（l10n）是一个更具体的术语，它描述了如何使你的应用程序适应特定的区域或市场。 不同的语言环境可以使用相同的语言，但它们仍然具有其习惯，如：日期格式或度量。

这个问题可以通过推动endpoint的翻译和动态加载它们来解决。这样做还可以让你在应用程序中实现页面翻译，使翻译人员，甚至是用户能够翻译应用程序。这种方法的缺点是，你有一个翻译的后端来维护。

另一种方法是让webpack生成每种语言的静态构建。问题是每次翻译更改时都必须更新应用程序。

webpack中使用i18n

i18n与webpack的基本思想是一样的。你有一个转换定义，然后通过替换映射到应用程序。结果包含应用程序的翻译版本。你可以使用以下几种解决方案：

  • i18n-webpack-plugin 依赖于纯JSON定义，并通过__（“Hello”）占位符进行替换。 *[po-loader](https://www.npmjs.com/package/po-loader）映射[GNU gettext PO文件]（https://www.gnu.org/software/gettext/manual/html_node/PO-Files.html）到多种格式，包括原始JSON和[Jed]（https://messageformat.github.io/Jed/）。
  • [jed-webpack-plugin]（https://www.npmjs.com/package/jed-webpack-plugin）是一个基于插件的Jed解决方案。
  • [globalize-webpack-plugin] (https://www.npmjs.com/package/globalize-webpack-plugin) 补充[globalize] (https://www.npmjs.com/package/globalize) 以实现i18n/l10n目的。

在项目中，引用 i18n-webpack-plugin 是一个很好的开端。

创建一个demo

为了使翻译有效，请设置要替换的内容：

app/i18n.js

console.log(__("Hello world"));

要将其翻译成芬兰语，请添加如下定义：

languages/fi.json

{ "Hello world": "Terve maailma" }

下一步是使用webpack将文件整合到一起。

要让ESLint知道全局 __ 函数，你应该通过 globals .__：true 将它添加到你的linting规则中。

使用 I18nWebpackPlugin

首先，安装 i18n-webpack-plugin 和 glob 依赖。后者是捕获翻译文件所必需的。

npm install glob i18n-webpack-plugin --save-dev

在webpack中，你应该遍历可用的语言，然后为每个语言设置配置：

webpack.i18n.js

const path = require("path");
const glob = require("glob");
const I18nPlugin = require("i18n-webpack-plugin");

const PATHS = {
  build: path.join(__dirname, "i18n-build"),
  i18nDemo: path.join(__dirname, "app", "i18n.js"),
};

const TRANSLATIONS = [{ language: "en" }].concat(
  glob.sync("./languages/*.json").map(file => ({
    language: path.basename(file, path.extname(file)),
    translation: require(file),
  }))
);

module.exports = TRANSLATIONS.map(({ language, translation }) => ({
  entry: {
    index: PATHS.i18nDemo,
  },
  output: {
    path: PATHS.build,
    filename: `[name].${language}.js`,
  },
  plugins: [new I18nPlugin(translation)],
}));

为方便构建，可以设置快捷方式：

package.json

"scripts": {
  "build:i18n": "webpack --config webpack.i18n.js",
  ...
},

执行 npm run build：i18n 脚本命令，你将得到一个新目录，其中包含两个翻译文件和每个翻译过的代码。

要做更复杂的项目，请按照 构建多页面应用 章节中的介绍的为每个翻译生成一个页面，然后添加一个语言选择器。语言定义可以通过webpack的 DefinePlugin 来处理。用户界面小部件可以依赖于该小部件，并基于页面或目录命名约定来加载语言。

代码分割 章节中讨论的技术对i18n有效。你可以定义动态的 import 来按需加载翻译文件。这样做会解决在其他地方加载和维护翻译的问题。

总结

其他webpack方法遵循类似的思想，更灵活，但需要更多的工作。如果你使用基于loader的解决方案，则可以设置拆分点来按需加载语言。

内容回顾：

  • 国际化（i18n）和本地化（l10n）是你的应用面向多个市场时，需要解决的重要问题。
  • Webpack支持多种i18n解决方案。尽管可以使用更复杂的替代方案，但作为起点，你可以替换特定注释。
  • 可以通过将其推送到服务器来处理该问题。它还允许你通过相同的API处理实际应用程序的转换。

在下一章中，介绍与webpack一起使用的各种测试工具和及其配置。

← 测试 →