本文将介绍如何使用 npm 包 localization-webpack-plugin 来实现前端多语言本地化。该插件可以自动将指定目录下的多语言文本文件提取成 JSON 格式数据，并集成到 webpack 的构建中，以便在代码中动态引用。
安装与配置
首先，使用以下命令安装插件：
npm install --save-dev localization-webpack-plugin
假设我们已经有了一个多语言文本文件目录 src/lang，其中包含多个语言的文本文件，文件名即为语言代码，例如：
src/lang/en.json src/lang/zh.json src/lang/fr.json ...
其中，每个文件的内容具体格式为：
{
"key1": "value1",
"key2": "value2",
...
}接下来，在 webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------------------ - --------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------
---------------- ------------
--------------- --------------
------------------- ------ ----- ------ -- -------
------------------------- -----------
------------------------- --------
---
--
-以上配置项含义如下：
outputDirectory: 输出目录。outputFileName: 输出文件名。supportedLanguages: 支持的语言列表，需要与src/lang目录下的文件名匹配。translationFileDirectory: 多语言文本文件目录。translationFileExtension: 多语言文本文件扩展名。
这里最重要的就是 LocalizaionPlugin 的使用，将其添加到 webpack 的插件列表中即可。
在代码中使用
在 webpack 构建完毕后，我们就可以在代码中通过引用 localization.json 对象来动态调用多语言文本了。例如：
import localization from './lang/localization.json' // ... const language = 'en' // 根据实际情况获取当前语言 const message = localization[language]['hello']
其中，localization 对象包含多个语言的文本信息，我们可以根据需要来获取其中某个语言对应的文本信息。
示例代码
下面是一个完整的 webpack 配置文件例子：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- -------------------- - ----------------------------------
----- ------------------ - --------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
--
-
----- ---------
---- -
----------------------------
------------
-
--
-
----- ----------
---- -
----------------------------
-------------
-------------
-
--
-
----- -----------------------
---- ---------------
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- ------------
---
--- ----------------------
--------- -------------
---
--- --------------------
---------------- ------------
--------------- --------------
------------------- ------ ----- ------
------------------------- -----------
------------------------- --------
---
--
---------- -
----- -----
----- ----
-
-同时，我们也需要创建一个 src/lang/en.json 文件，内容为：
{
"hello": "Hello, world!",
"intro": "This is a multi-language website",
"btn_confirm": "Confirm",
"btn_cancel": "Cancel"
}在代码中，我们可以通过以下方式来引用这些翻译信息：
import localization from './lang/localization.json' const language = 'en' // 根据实际情况获取当前语言 const message = localization[language]['hello']
以上就是使用 npm 包 localization-webpack-plugin 来实现前端多语言本地化的详细教程和示例代码。如果你的项目需要支持多语言，这个插件会使你的开发工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565fe81e8991b448e1eb3