前端开发工作离不开项目构建和多语言支持，在前端代码实现多语言时，我们可以使用 webpack-rails-i18n 这个 npm 包来加速开发进度。本文将会详细介绍如何使用 webpack-rails-i18n 这个工具为你的项目提供多语言支持。
什么是 webpack-rails-i18n
webpack-rails-i18n 是一个实现国际化的 npm 包，可以帮助我们轻松地在 ruby on rails 项目的前端部分中实现多语言支持。使用该工具可以将前端代码中的字符串提取到 YAML 文件中，十分方便快捷。
该 npm 包可以做到以下几个事情：
- 自动提取 vue、React 和 js 文件中的多语言字符串；
- 支持 YAML 格式的多语言数据存储，方便人类阅读和维护；
- 可以将多语言数据以 JSON 格式打包进 webpack bundle 中，无需额外请求，加快页面响应速度；
- 允许使用 I18n.t 等 Ruby on Rails 自带的多语言 Internationalization (I18n) 功能；
- 支持中英文混合的情况下也可以正常使用。
安装 webpack-rails-i18n
在使用 webpack-rails-i18n 之前，我们需要先安装它。使用以下命令来安装 webpack-rails-i18n：
npm install webpack-rails-i18n --save-dev
在安装 webpack-rails-i18n 后，我们需要在 webpack.config.js 文件中进行配置。
配置 webpack-rails-i18n
webpack-rails-i18n 工具需要在 webpack.config.js 文件中进行相应的配置。修改你的 webpack.config.js 文件中的内容（若没有此文件，请手动创建）：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
----- ---- - ----------------
-------------- - -
------ -
---- ---------------
--
------- -
--------- ------------
----- ----------------------- --------
----------- ---------
--
------- -
------ -----
--
-------- -
--- ------------------
----------- -------------------- ------------------
-------------- --------
------------- ------ --------
---
--
-- outputPath：指定多语言数据存储的目录。
- defaultLocale：默认语言，当数据文件中没有该语言包时，使用此语言。
- translations：支持的语言列表，将会自动生成对应的多语言数据文件。
重要提醒：WebpackRailsI18n 的内部机制会通过正则匹配从 html、scss、vue、jsx、coffee 等文件类型中筛选出所有字符串，建议将字符串量控制在5000以下。
使用 webpack-rails-i18n
配置好我们的 webpack.config.js 文件后，我们就可以使用 webpack-rails-i18n 为我们的项目实现多语言支持了。
在项目代码中，我们可以通过以下方式获取相应的多语言字符串。
I18n.t('hello');这里的 hello 就是我们在 YAML 文件中定义的 key 了。我们在 YAML 文件中定义多语言字符串的格式为：
zh-CN:
greetings: "你好"
hello: "你好，%{name}！"
en:
greetings: "Hi"
hello: "Hello, %{name}!"在使用 I18n.t 方法时，如果涉及文字的使用，我们需要通过 %{name} 的方式来进行占位符的替换。
我们还需在代码中引入 i18n.js。
import I18n from 'i18n-js';
import translations from '../path/to/translations'
I18n.translations = translations;
console.log(I18n.t('greetings')); // 你好
console.log(I18n.t('hello', {name: 'John'})); // 你好，John！示例代码
下面是一个简单的 webpack-rails-i18n 示例代码，以供参考：
Webpack.config.js
-- -------------------- ---- -------
----- ---------------- - ------------------------------
----- ---- - ----------------
-------------- - -
------ -
---- ---------------
--
------- -
--------- ------------
----- ----------------------- --------
----------- ---------
--
------- -
------ - -- --- -- -
--
-------- -
--- ------------------
----------- -------------------- ------------------
-------------- --------
------------- ------ --------
---
--
-i18n.js
import I18n from 'i18n-js';
import translations from '../path/to/translations'
I18n.translations = translations;
console.log(I18n.t('greetings')); // 你好
console.log(I18n.t('hello', {name: 'John'})); // 你好，John！Translations.yml
zh-CN:
greetings: "你好"
hello: "你好，%{name}！"
en:
greetings: "Hi"
hello: "Hello, %{name}!"总结
webpack-rails-i18n 是一款实现国际化的 npm 包，可以帮助我们轻松地在项目的前端部分中实现多语言支持。在使用该工具前，需要安装 npm 包并在 webpack 中进行相应的配置，接着可以在项目中使用 I18n.t 方法来获取相应的多语言字符串。使用 webpack-rails-i18n 可以大大减少我们前端开发中的工作量，增强代码的可维护性和可读性。希望本文对你有所帮助，祝你工作愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de894