如果你是一名前端开发者，你一定知道 webpack 这个强大的打包工具，并且也知道如何使用 webpack 加载不同类型的资源。但是，如果你的项目使用了 BEM 方法学进行组件化开发，并且需要使用 i18n 达到多语言支持，那么你需要引入一个特殊的 loader，它就是这个 npm 包 "webpack-bem-i18n-loader"。
什么是 BEM 和 i18n？
BEM 是一种流行的前端组件化开发方法，它将页面视为一个由多个独立的组件组成的整体，每个组件都有自己的 HTML 代码和 CSS 样式。BEM 方法的核心是使用一些特殊的 class 命名规则来表示组件的不同状态，比如 "block__element--modifier"。
i18n 指的是国际化，也就是将应用程序设计为可以支持多种语言环境，这样用户可以在不同的地区使用相同的应用程序并且能够理解它。
如何使用 webpack-bem-i18n-loader？
首先，你需要安装这个 loader：
npm install webpack-bem-i18n-loader
然后，在你的 webpack 配置文件中添加一个规则：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------------
---- -
-
------- --------------------------
-------- -
----- ------
--
--
--
--
--
--
-- ---
--这个规则告诉 webpack 当你要加载一个以 .i18n.json 结尾的文件时，使用 webpack-bem-i18n-loader 解析和处理它。
配置选项
webpack-bem-i18n-loader 有一些可配置的选项：
defaultLocale：默认的语言环境，默认值为en。localesPath：存放语言包的目录，默认值为./src/i18n/locales。bemNaming：BEM 的命名规则，详细配置请参考 BEM 官方文档。i18nNaming：i18n 的命名规则，详细配置请参考 i18next 官方文档。filepath：当前文件的完整路径，在使用 webpack-bem-i18n-loader 时自动注入，你可以在你的代码中访问它。
使用示例
我们可以假设你有以下 i18n 文件：
// zh-CN.i18n.json
{
"pageTitle": "我的页面",
"welcomeMessage": "欢迎来到我的页面！"
}然后，在你的 BEM 组件中，你可以这样引入和使用它们：
-- -------------------- ---- -------
---- -------------------- ---
------- ---------------
--- ----------------------
--- ---------------------- --
-----
-- ------------------------
--- --------------------------- --
----
---------在上面的代码中，我们使用了 i18next 库提供的 t 函数来加载翻译后的文本。
结语
webpack-bem-i18n-loader 是一个非常实用的 webpack loader，它可以方便地帮助我们在 BEM 组件化开发中实现多语言支持。在本文中，我们介绍了如何使用它、它的配置选项以及使用示例。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b50