在现代 Web 开发中，国际化是一个非常重要的话题。为了方便使用者进行多语言的应用，有很多方案和工具可供选择。而本文要介绍的是一个基于 fis3 的 npm 包 fis3-parser-umu-component-i18n，它是一个构建组件化 Web 应用的多语言国际化工具。
安装
在使用之前，需要先安装 fis3：
npm install -g fis3
然后安装 fis3-parser-umu-component-i18n：
npm install fis3-parser-umu-component-i18n --save-dev
使用
配置
在使用之前，需要在 fis3 的配置文件中进行配置。可以先简单地理解，配置就是告诉 fis3，使用哪个插件进行什么样的操作。
-- -------------------- ---- -------
-- -----------
---------------------- -
------- -------------------------------- -
-- ----------
-------- -------
-- ----
------------ -----
-- -------
--------------- ------ -----
---
-- -------
-------- ------------
--使用
在 HTML 文件中，可以使用类似以下的代码片段，来使用多语言：
<div data-i18n="hello_world"></div>
其中，data-i18n 属性的值是一个键值，代表了需要展示的文字。在使用该插件时，会自动根据当前语言环境，从对应的语言包文件中，去读取对应的译文，并将其填充到该元素中。
语言包文件
在配置中，需要提供一个语言包文件所在的目录，以及默认语言和支持的语言列表。那么，具体是什么样的语言包文件呢？
以 JSON 格式为例，该文件的大致结构可以如下：
{
"zh": {
"hello_world": "你好，世界！"
},
"en": {
"hello_world": "Hello, world!"
}
}其中，"zh" 和 "en" 代表各自的语言代码。每个语言都对应一个包含键值对的对象，键代表需要显示的文本的关键字，值代表该关键字在该语言下的译文。
示例
目录结构
在本地创建一个目录，作为示例的项目。
. ├── fis-conf.js ├── i18n │ ├── en.json │ └── zh.json └── index.html
其中：
fis-conf.js：fis3 的配置文件；i18n/：语言包文件所在的目录；en.json：英文语言包；zh.json：中文语言包；index.html：示例 HTML 文件。
配置文件
-- -------------------- ---- -------
-- -----------
---------------------- -
------- -------------------------------- -
-------- -------
------------ -----
--------------- ------ -----
---
-------- ------------
--语言包文件
-- -------------------- ---- ------- -- ------------ - -------------- -------- - -- ------------ - -------------- ------- ------- -
HTML 文件
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------------------------- ----------
-------
------
---- ------------------------------
-------
-------运行
在命令行执行以下命令，将代码进行构建：
fis3 release
会得到以下目录结构：
.
└── static
└── index.html打开 static/index.html，即可看到展示了对应语言的译文的页面。
总结
通过本文的学习，我们了解了如何使用 npm 包 fis3-parser-umu-component-i18n，来构建组件化多语言 Web 应用。具体而言，我们需要进行配置和编写语言包文件，然后在 HTML 文件中使用该插件提供的 API，即可轻松地展示各个语言下的正确译文。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1281e8991b448d9b4d