在前端开发中，BEM 是一种高效的 CSS 类名命名规范。使用 BEM 可以让我们更好地组织 CSS 文件，并且使 CSS 代码更加可维护和扩展。然而，当项目文件数量庞大时，手动维护 BEM 的依赖关系会变得非常困难。此时，一个好用的自动化工具就显得尤为重要。今天我们要介绍一款非常优秀的 BEM 依赖解析工具：@intervolga/bemdeps-loader。
安装
@intervolga/bemdeps-loader 是 npm 包，我们可以通过以下命令安装：
npm install --save-dev @intervolga/bemdeps-loader
使用方法
@intervolga/bemdeps-loader 对 webpack 项目非常友好，使用时只需在 webpack 配置文件中增加一段代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- ------------
--
-
------- -----------------------------
-------- -
------- ---------------------------
-
-
-
-
-
-
--在上述配置中，我们使用 css-loader 和 @intervolga/bemdeps-loader 分别处理 CSS 文件。其中，@intervolga/bemdeps-loader 需要配置 levels 参数，指定 BEM 规范的层级结构文件夹路径。例如：
-- -------------------- ---- ------- ------------ --- ------------ - --- --- --- --- - --- --- --- --- - --- ------------- - - --- ------ - - --- --- - --- -------------- - - --- ---- - - --- --- - --- ------------ - --- ------ - --- --- --- ------------ --- ----------------- --- ---
上述代码片段中，我们的 BEM 规范文件位于 ./bem 目录下。因此，我们可以在 options 中指定：
options: {
levels: ['./bem/common.blocks', './bem/desktop.blocks', './bem/touch.blocks']
}这里，我们指定了三个层级。读者也可以根据自己的文件目录结构进行相应的配置。
基本功能演示
假设我们有一个简单的项目，其中一个 CSS 文件 main.css 中包含如下代码：
.Block {
display: flex;
}
.Block__Element {
background-color: #eee;
}我们使用 @intervolga/bemdeps-loader 处理该文件，webpack 会自动地帮我们解析 BEM 的依赖关系。例如，当我们在其他文件中使用 .Block__Element 类，webpack 会自动将 main.css 文件加入到依赖列表中。
在上述基础上，我们增加了如下代码：
.Block__Element_modifier {
background-color: #FFC0CB;
}这里，我们定义了一个名为 Block__Element_modifier 的 BEM Modifier。在其他文件中，当我们使用 .Block__Element_modifier 类时，webpack 会自动将 main.css 文件加入到依赖列表。
高级功能演示
在实际项目中，BEM 的依赖关系可能非常复杂。在这种情况下，我们可以使用 @intervolga/bemdeps-loader 提供的高级功能。例如，假设我们新增了如下代码：
.Block__Element_state {
display: block;
}这是一个状态（State）的定义，表示 .Block__Element 的状态为 display: block。在这种情况下，我们需要让 webpack 知道该状态依赖于 main.css，并且main.css 依赖于 .Block__Element，以确保 webpack 在处理状态时能够正确地解析依赖关系。为此，我们可以使用如下代码：
.block__element_state {
display: block;
&:require {
Block__Element;
}
}在上述代码中，我们使用了 &:require 来告诉 webpack 接下来的状态依赖于什么。注意，这里 & 代表的是输入的 BEM Selector，也就是 .Block__Element_state 中的 .Block__Element 部分。在大多数情况下，我们只需要使用这个标记即可满足需求。
在某些复杂情况下，我们可能需要显式地指定状态依赖。此时，我们可以修改上述代码，例如：
.block__element_state {
display: block;
&:require(
Block__Element
);
}在这个例子中，我们使用了 :require() 来指定状态依赖，接着将依赖项放在圆括号内。
总结
通过本文介绍，我们了解了 @intervolga/bemdeps-loader 的基础用法和高级功能。该工具为前端开发者处理 BEM 依赖关系提供了非常好的解决方案，并且使用简单、易于上手。希望开发者们可以掌握并灵活运用这个工具，让前端开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e24417f