什么是 BEM
BEM 是一种基于模块化的前端开发方法论，其名称来源于块（Block）、元素（Element）和修饰符（Modifier）三个词汇的首字母缩写。
BEM 的特点是将 UI 组件抽象为块，并使用块、元素和修饰符标记结构，从而使得代码清晰、可读性高、易于扩展和维护。BEM 还提供了一些命名规范，能够有效地避免样式冲突问题。
@bem/sdk.config 的作用
@bem/sdk.config 是一个 npm 包，其作用是为 BEM 提供配置文件支持。使用该配置文件可以方便地定义块、元素和修饰符的命名方式，并且可以设置一些编译选项，如编译产物的命名方式、输出目录等。
@bem/sdk.config 的安装
使用 npm 包管理器进行安装：
npm install @bem/sdk.config
@bem/sdk.config 的配置
@bem/sdk.config 的配置分为两部分：命名规范和编译选项。
命名规范
BEM 的命名规范是其重要特征之一。使用 @bem/sdk.config 让我们可以方便地定义命名规范。
首先，在项目的根目录下创建一个 .bemrc.js 文件，用于存放配置信息。该文件的内容如下：
-- -------------------- ---- -------
-------------- - -
-
----- ----------
------- ---------
------- -
-
----- -----------------
------- --------
-
-
-
-其中，name 和 scheme 字段用于定义命名规则的名称和结构方式，levels 用于定义块所在的目录。
- name: 字符串类型，为命名规范的名称。
- scheme: 字符串类型，有两种选项：flat 和 nested，分别对应扁平结构和嵌套结构。
- levels: 数组类型，用于定义块所在的目录。每个元素包含了 path 和 scheme 两个字段。
编译选项
@bem/sdk.config 的编译选项有如下几个：
- outputDir: 编译产物的目标目录，默认为 dist。
- outputNaming: 编译产物的命名方式，默认为 '[block].css'。
- techMap: 编译产物的后缀名和对应的技术名，默认为 { css: ['css', 'scss', 'sass'] }。
可以在 .bemrc.js 文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-
----- ----------
------- ---------
------- -
-
----- -----------------
------- --------
-
--
---------- --------
------------- ------------------
-------- - ---- ------- ------- -
-
-@bem/sdk.config 的使用
@bem/sdk.config 的使用依赖于@bem/cli，因此需要先进行安装：
npm install @bem/cli
设置好配置文件之后，就可以使用 @bem/cli 进行编译了。使用方式如下：
bem make
以上命令将会编译所有 src/components 目录下的块。
示例代码
下面的示例代码演示了使用 @bem/sdk.config 编译一个简单的 BEM 组件的过程。
- 首先，安装 @bem/sdk.config 和@bem/cli。
npm install @bem/sdk.config @bem/cli
- 在项目的根目录下创建 .bemrc.js 配置文件，并添加如下配置：
-- -------------------- ---- -------
-------------- - -
-
----- ----------
------- ---------
------- -
-
----- -----------------
------- --------
-
--
---------- --------
------------- ------------------
-------- - ---- ------- ------- -
-
-- 在 src/components 目录下创建一个 test 块，其目录结构如下：
./src/components/test/ ├── test.css ├── test.js └── test.html
其中，test.css、test.js 和 test.html 分别为块的样式、脚本和 HTML 模板。在 test.css 文件中定义如下样式：
.test {
width: 100px;
height: 100px;
background-color: red;
}- 使用 @bem/cli 进行编译：
bem make
以上命令将会在 build 目录下生成 test.min.css 文件。
- 在 HTML 中引入编译产物：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ----- ---------------- ---------------------------- ------- ------ ---- ------------------- ------- -------
- 打开浏览器，查看效果。可以看到 test div 的宽高为 100px，并且背景色为红色。
结论
通过使用 @bem/sdk.config 及其配合的工具，我们可以方便地实现 BEM 的命名规范和编译产物的生成。其提供了丰富的配置选项，能够满足大部分场景的需求，并且可以很好地和其他编译工具结合使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/94073