随着全球化和互联网的发展，国际化（i18n）已经成为了一个必不可少的前端开发技术。在多语言的情况下，我们需要在前端实现不同语言环境的切换，而 npm 包 i18n-json-loader 就是一款优秀的工具。
i18n-json-loader 简介
i18n-json-loader 是一个 Webpack Loader，用于将指定目录下的 JSON 文件转换为 key-value 对象，并将其注入到 JavaScript 中。借助 i18n-json-loader，我们可以轻松地实现多语言网站的开发和维护，同时也避免了在 JavaScript 中硬编码字符串的问题。
安装和配置
第一步：安装 i18n-json-loader
我们可以通过 npm 命令行安装 i18n-json-loader：
npm install i18n-json-loader --save-dev
第二步：在 webpack.config.js 中配置 i18n-json-loader
在 webpack.config.js 中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-- -----
------- -
------ -
-- -- ------ ---
-
----- ---------------------
---- -
------- -------------------
-------- -
-------- ---------- -- ------------------- ---
-------- ----------------- -- ------
--
--
--
--
--
--在以上配置中，我们设置 test 的值为匹配目录下所有以 .json 结尾的文件。use 部分的 loader 为 i18n-json-loader，options 部分定义了包含和排除的语言包。
第三步：创建语言包
我们可以创建一个包含国际化字符串的 JSON 文件。这些文件被放置在一个名为 locales 的文件夹中。
例如：
// locales/zh.json
{
"hello": "你好",
"welcome_back": "欢迎回来",
"button_text": "点击我"
}// locales/en.json
{
"hello": "Hello",
"welcome_back": "Welcome back",
"button_text": "Click Me"
}在 JavaScript 中使用 i18n-json-loader
一旦我们成功配置了 i18n-json-loader，我们就可以将其注入到 JavaScript 中：
import i18n from 'i18n-json-loader!./locales';
注意，在引入时，我们需要在 i18n-json-loader 后面加上感叹号，然后指定转换语言包的目录。
现在，我们可以使用 i18n 对象，访问我们转换后的语言包：
console.log(i18n.hello); console.log(i18n.welcome_back); console.log(i18n.button_text);
疑难解答
如果我需要在其他第三方库中使用 i18n-json-loader 呢？
在使用第三方库时，我们可能需要在其模块中使用 i18n-json-loader。下面是一个简单的例子。
在打包时，我们需要在 webpack 配置文件中将 node_modules 也编译过去，以便在第三方库中使用 i18n-json-loader。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- --------
--
-------------- -
-------- ---------------- ----------------------- ------------
--
------- -
------ -
-
----- ---------------------
---- -
------- -------------------
-------- -
-------- ----------
-------- -----------------
--
--
--
--
--
-------- -
------ -
---- ----------------------- -------
--
--
--如果我需要在 Vue.js 中使用 i18n-json-loader 呢？
i18n-json-loader 也被广泛用于 Vue.js 项目中。下面是一份简单的 Vue.js 组件的例子。
-- -------------------- ---- -------
----------
-----
------ ---------- -------
----- ----------------- ------
---------- ---------------- -----------
------
-----------
--------
------ ---- ---- -----------------------------
------ ------- -
----- ------
------ -
------ - ---- --
--
--
---------总结
借助于 i18n-json-loader，我们可以轻松地创建和维护多语言网站和应用程序，同时大大简化了代码和维护工作。如果您需要实现多语言开发，欢迎使用 i18n-json-loader 来帮助您完成这项任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055db581e8991b448db73c