国际化

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

这个问题可以通过终端翻译并使用 Webpack 动态加载来解决。这样做还可以让您在应用程序中实现翻译界面,使翻译人员甚至用户能够翻译应用程序。这种方法的缺点是,您必须维护相关的翻译功能。

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

在 Webpack 中使用 i18n

i18n 的基本思路在 Webpack 中仍然是适用的。首先我们要有一个基本的翻译,然后通过替换将其映射到应用程序中。这样我们就可以得到一个翻译版本的应用程序。您可以通过以下几种解决方案来使用多种翻译格式:

出于演示的方便,我们使用 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-pluginglob。后者是捕获翻译文件所必需的。

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 中测试工具的设置。

用户头像
登录后发表评论