在前端工作中，使用 BEM（块、元素、修饰符）命名约定已经成为一种最佳实践。使用 BEM 可以帮助我们在设计和构建组件时更好地管理代码。
为此，@bem/fs-scheme 作为一款 NPM 包，提供了一些非常有用的方法，可以帮助我们更好地使用 BEM。在本文中，我们将介绍如何使用 @bem/fs-scheme 包及其一些有用的功能。
安装 @bem/fs-scheme
首先，你需要安装 Node.js，以便在其上运行 npm 包。
接下来，在项目中执行以下命令安装 @bem/fs-scheme 包：
npm install @bem/fs-scheme --save-dev
创建 BEM 结构
- 首先，在项目根目录下创建一个名为
.bem/entity.package的文件。此文件包含你的所有 BEM 实体名。
# my-project/.bem/entity.package block-of-my-project element-of-my-project modifier-of-my-project
- 在
.bem/entity.package文件中创建你的实体：
# my-project/.bem/block-of-my-project/block-of-my-project.bemdecl.js
exports.blocks = [
{ name: 'block-of-my-project', mods: { 'mod-of-block': true } }
];- 使用命令行运行命令创建你的 BEM 结构：
node_modules/.bin/bem create -d -t block block-of-my-project
这将在 my-project/blocks 文件夹中创建一个名为 block-of-my-project 的目录并构建可能需要的模板文件。在这里，你也可以创建其他实体，例如 element 和 modifier。
使用 @bem/fs-scheme
在你的项目中使用 @bem/fs-scheme 包时，你需要了解和使用其一些工具方法。
new Scheme()
@bem/fs-scheme 提供了一个类 Scheme ，通过它，我们可以通过实例化的方式创建一个快速访问 BEM 实体的方法。
通过以下代码创建一个新的 Scheme 实例，并检查它是否可以工作：
const { Scheme } = require('@bem/fs-scheme');
const scheme = new Scheme();
scheme.load();
console.log(scheme.entity('block-of-my-project')); // Outputs the structure of block-of-my-projectwithNaming()
.withNaming() 方法会接受一个用于创建实体命名约定的函数，并在使用 scheme.create() 方法时传递它。
下面是一个使用 .withNaming() 的示例：
-- -------------------- ---- -------
----- - ------- ---------- - - --------------------------
----- ------ - --- --------
------------------------ -------- -- -
----- ------------ - -----------------
----- ---- - -----------------------------
------ - ---- --
----
--------------
----- ----- - --------------- ------- ---------------------- -------- --------- ---在这里，我们使用了 withNaming()，如果使用 create() 创建时传递了 entity 和 variant，那么返回的命名约定将实际上使用了一个带有 - 连接的实体。接下来，可以通过返回的对象访问实体。
Naming()
Naming 在 scheme.withNaming 中被调用。在本例中，我们使用了带有实体名称和素材名称的简单字符串，其值可以在 $_b(_mod)?_e这样的深度嵌套中使用。
-- -------------------- ---- -------
----- - ------- ------ - - --------------------------
----- ------ - --- --------
------------- - -- --
----------- --- -------- -- --------- -- ------------- --------------------- - -----
------------ --- -------- -- ---------
----------- ----- -------- -- ----------- -------- -- ---------------------
----- ------ - --- ---------------------------
----- ------- - -
------ --------
---- --------- ----------- ---------
----- -
---- --------
--
-------- -
----- -------
---- - ------ -------- ----- ------- ----- - ---- ------- - --
-------- -------
--
-
----------------------------------- --------
--
-
------- --------
----- - ---- ------- --
---- -
- ------ -------- ----- ------- ----- - ---- ------- - --
---------------
------------------
-------------
--
-------- -
------- -------
---- - - ------ -------- ----- ------- ----- - ---- ------- - - --
-------- ------
-
-
--在本例中，我们创建了一个名为 naming 的新 Naming 实例，并在其上应用了四个规则：
block访问被作为元素出现的实体名称，例如 block 或者 input。mod访问用于对实体头部的修饰符的修饰符名称和值,例如 { block: 'block', mods: {'clean': true} }。elem访问在子实体上使用的命名约定，例如block__elem。mix访问混入其他实体的数组，例如 { block: 'block', mix: { block: 'another-block' } } 等价于 { block: 'block', mix: [ { block: 'another-block' } ] }。
rebuild()
.rebuild() 方法可以接受一个对象，并且使用你指定的实体命名约定进行转换。转换后的结果是与 BEM 命名约定相兼容的 BEM 约定树。
const scheme = new Scheme();
const naming = ... // Use a Naming instance
// Rebuild an object with the specified naming convention
const result = scheme.rebuild({ block: 'block', mods: { 'mod-of-block': true } }, naming);
console.log(result); // Outputs the result with the new naming convention以上是一些 @bem/fs-scheme 的核心功能。使用这些功能之后，你可以更轻松地使用 BEM 实体命名规范来创建组件！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1fe0de403f2923b035c62b