i18 是一个前端国际化（Internationalization）工具，它可以将页面中的文本、时间、数字等信息转化为不同语言的版本，以便满足不同地区、不同语言用户的需求。i18 工具可以让你的网站支持多语言，提升用户体验。
本教程将介绍如何使用 npm 包 i18 进行前端国际化。
步骤 1：安装 i18
首先，我们要使用 npm 包管理器来安装 i18。在命令行中输入以下命令：
--- ------- --- ------
步骤 2：配置 i18
完成 i18 的安装后，我们需要对其进行配置。在项目的根目录下，新建一个 i18.config.js 文件，并输入以下代码：
-------------- - - -------------- ----- -------- ------ ----- ------ ---------- --------- - ----------- ------------ ---- -
以上代码定义了 i18 的默认语言、支持的语言种类、语言文件存放的位置等配置信息。
defaultLocale：默认语言。locales：支持的语言种类。directory：语言文件存放的位置。updateFiles：是否自动更新语言文件。
步骤 3：创建语言文件
在 directory 指定的目录下，我们需要创建对应方法的语言文件。例如，要为英语、法语和西班牙语创建语言文件，则需要在 locales 目录下创建以下文件：
-------- --- ----- --- ----- --- -----
接下来，我们需要在其中放置对应语言的翻译信息。例如，下面是 en.js 的示例代码：
- ------ -------- ------ -------- -------- -- -- ---------- -------- -- -- --------- -
在这个文件中，我们可以定义多个键值对，用于将网站上的英文文本转化为对应的语言版本（例如将 "Hello World!" 对应翻译成 "你好，世界！"）。
步骤 4：使用 i18
经过以上步骤的配置和准备，我们可以开启应用的前端国际化之旅了。在需要应用 i18 的文件中，我们需要引入 i18，例如：
------ --- ---- -----
然后，我们可以将想要翻译的文本传给 i18 进行翻译。例如，以下代码将 "Hello World!" 转为对应语言版本:
------------- --------
将会返回当前语言对应的文本，例如在 en.js 中定义的 "Hello World!" 则会翻译为 "Hello World!"。在 fr.js 中定义了 "Hello World!" 则会翻译为 "Bonjour le monde!"。
步骤 5：切换语言
i18 还支持用户自定义语言，当用户切换语言时，网站上的文本会随之变化。以下是一个示例代码，用于实现语言的切换：
-----------------
以上代码将当前语言切换到法语。当用户点击语言切换按钮时，我们可以通过监听点击事件来触发切换语言的代码。
小结
本教程介绍了如何使用 npm 包 i18 进行前端国际化。通过这个工具，我们可以将网站上的文本转化为不同语言的版本，提升用户体验。在配置 i18 时，我们需要定义默认语言、支持的语言种类，以及语言文件存放的位置。在使用 i18 进行翻译时，我们需要传入待翻译的文本，i18 会自动将其转化为对应语言的版本。同时，我们还可以通过切换语言来实现多语言支持。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005599d81e8991b448d7310