在现代的前端开发中，多语言支持已成为一项必备的功能。而对于将一个网站或者应用程序本地化到多种语言的开发者来说，管理多语言翻译文本的过程是非常繁琐和复杂的。json-translations-webpack-plugin 这个 npm 包的出现给了开发者们一个可靠和高效的翻译文本管理解决方案。本文将介绍这个 npm 包的详细使用教程，旨在为开发者提供一个方便简单的多语言支持方案。
安装和基本使用
使用 json-translations-webpack-plugin 前，我们需要先确保环境中已安装了 webpack。
安装 json-translations-webpack-plugin：
npm install --save-dev json-translations-webpack-plugin
我们配置一个来自一个名称为“src”的文件夹中的应用：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ------- - -------------------
----- ----------------------------- - --------------------------------------------
----- ----- - -
---- -------------------- -------
----- -------------------- --------
--
-------------- - -
------ -
---- --------------------- -------------
--
------- -
--------- -------------------
----- -----------
----------- ----
--
-------- -
--- -------------------
--------- -------------------- --------------
---
--- ----------------------
----------------------- -------------------------------------
---
--- -------------------------------
--------- --------------------
------------- -
--- -------------------- --------------- -----------
--- -------------------- --------------- -----------
--
---------------- -----
------ -----
---
--
--注意我们添加了 plugins 数组中的新的 webpack 插件：JsonTranslationsWebpackPlugin。我们将其配置为 watch 模式来监视文件的变化。
JsonTranslationsWebpackPlugin 有 4 个必传属性：
filename: 指定最终的输出 json 文件的名称。translations: 这是一个包含翻译文件的对象。其中 key 是语言标识符，value 是翻译后的 JSON 对象。多个语言的情况下，可以在此对象中添加更多的语言。defaultLanguage: 这个插件会尝试将用户的语言环境与我们支持的语言进行匹配。如果它无法匹配，则使用此默认值。watch: boolean 值，指定是否监听 JSON 文件的变化。默认为 false。
用法示例
在我们的应用中，我们可以使用翻译文件中的翻译值。我们可以创建一个“./src/translations/en.json”文件，其中包含这样的数据：
-- -------------------- ---- -------
-
-------- --------
-------- --------
---------- -------- -- --- -------
----------- -
------- -----------
-------------- --------- ------------
-
-然后我们可以在我们的应用中引用这些翻译：
import translations from './translations.json'; console.log(translations.hello); // "Hello" console.log(translations.category.name); // "Category"
高级选项
JsonTranslationsWebpackPlugin 还有一些高级选项可以优化翻译的使用体验。下面我们介绍一下这些选项：
transform
transform 选项可以让我们基于翻译文件的内容，进行一系列操作。比如，我们可以使用当地语言翻译，但是在某些情况下，我们希望翻译文件中的文本是插值的。这里有一个示例：
// translations/en.json
{
"greeting": "Hello ${username}!",
}// App.jsx
import translations from './translations.json';
const App = ({ username }) => (
<h1>{translations.greeting.replace('${username}', username)}</h1>
);这似乎很简单，但是如果你使用的是叫做 i18next 的库，那么使用 transform 将变得更方便：
const i18n = require('i18next');
const transformation = require('i18next-transform-react').default;
const translations = require('./translations.json');
i18n.use(transformation).init({
lng: 'en', // or i18n.detector.detect()
resources: { en: { translation: translations } },
});onMissingTranslation
我们可以使用 onMissingTranslation 选项来告诉插件如何处理缺少翻译的情况。默认情况下，当翻译为空时，输出空字符串。但是，我们可以使用 onMissingTranslation 选项来改变这种行为。例如，我们想要在遇到翻译错误时抛出错误：
new JsonTranslationsWebpackPlugin({
// ...
onMissingTranslation: ({ value, key, language }) => {
throw new Error(`Translation missing for language "${language}", key "${key}": ${value}`);
},
})onLoaded
有时，我们不仅仅是想要捕获翻译文件，还想进行一些异步操作（例如，使用服务器端渲染）。我们可以使用 onLoaded 选项来捕获完整的翻译数据。
-- -------------------- ---- -------
--- -------------------------------
-- ---
--------- -------------- -- -
--------------------------
------ --- ----------------- -- -
-- ------- --- ----- ----
----------
---
--
--结论
在本文中，我们介绍了 json-translations-webpack-plugin 这个 npm 包，并详细介绍了其基本使用方法和高级用法，包括 transform、onMissingTranslation 和 onLoaded 选项。这个 npm 包是一个非常实用丢且能够显著提高多语言支持开发效率的解决方案。希望开发者们可以在此基础上，构建出更加高效、简洁、可靠的多语言网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d86