Tim的资源站国际化（i18n）本身就是一个很大的话题。最广泛的定义与将用户界面转换为其他语言有关。本地化（l10n）是一个更具体的术语，它描述了如何使您的应用程序适应特定的区域或市场。不同的地区可以使用相同的语言，但它们仍然具有特定的习惯，例如日期格式和度量单位。
这个问题可以通过终端翻译并使用 Webpack 动态加载来解决。这样做还可以让您在应用程序中实现翻译界面，使翻译人员甚至用户能够翻译应用程序。这种方法的缺点是，您必须维护相关的翻译功能。
另一种方法是让 Webpack 生成每种语言的静态构建，问题是每次更改翻译时都必须更新应用程序。
在 Webpack 中使用 i18n
i18n 的基本思路在 Webpack 中仍然是适用的。首先我们要有一个基本的翻译，然后通过替换将其映射到应用程序中。这样我们就可以得到一个翻译版本的应用程序。您可以通过以下几种解决方案来使用多种翻译格式：
- i18n-webpack-plugin 依赖于纯 JSON 定义的翻译文件，并通过类似于
__("Hello")的占位符执行替换。 - po-loader 将 GNU gettext PO 文件 映射为多种格式，包括 JSON 和 Jed。
- jed-webpack-plugin 是一个基于 Jed 的解决方案。
- globalize-webpack-plugin 是一个 Webpack 插件，通过它可以使用 globalize 解决 i18n/l10n 问题。
出于演示的方便，我们使用 i18n-webpack-plugin。
配置项目
要证明翻译有效，我们设置一份要替换的内容：
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 中测试工具的设置。
