随着项目复杂度和规模的不断增加，前端开发中使用 BEM （块，元素，修饰符）命名方法已经成为了一种趋势。而使用 BEM 的前提条件就是需要一个合适的工具来进行构建和管理。而在这里，我们推荐使用 npm 包 bem-tools-core 进行 BEM 的管理工作。
简介
bem-tools-core 是一个基于 Node.js 的 npm 包，旨在为使用 BEM 的开发人员提供好用的，可拓展性高的工具集。它可以通过命令行工具或者配置文件的方式来执行 BEM 构建任务，并包括了命名解析，静态分析，模块化打包等功能。bem-tools-core 可以很方便的集成到 Webpack 等构建工具里，使得开发任务更加自动化。
安装
安装 bem-tools-core 很简单，只需要在终端（命令行）中输入下面的命令即可：
--- ------- -------------- ----------
使用
bem-tools-core 提供了丰富的命令和配置方式，可以满足各种项目的需求。以下是一些常用的使用方式和命令：
初始化
在项目根目录下创建配置文件：
----------------------- ---- -------
运行上述命令后，在项目根目录下就会创建一个 .bem 目录，并在目录下创建一个 bemdecl.js 文件。
解析命名
解析一个自定义的命名：
----------------------- ---- ---- -- -------
参数 -n 表示自定义命名。
构建
构建整个项目：
----------------------- ----
构建某个部分：
----------------------- ---- ----
标记
标记某个部分：
----------------------- ---- ------- ---------
参数 --no-deps 表示不对该部分的依赖进行构建。
忽略
忽略某个部分：
----------------------- ---- ------- -------- ---------- ---------------- ----------------
参数 --exclude-blocks 表示忽略某个元素。
高级配置
bem-tools-core 的配置可以写在 JSON、YAML 或 JavaScript 文件中。以下是一个 YAML 配置文件的示例：
----- ---- - ----- ------- - ----------------- - ------------------ ------ - -------- - -------- - ---- -------- - ---- - ---- ----- - ---------- - ---------------- -------- - ------- - --------- ------- ----- ----
其中，root 表示项目根目录；levels 表示包含 BEM 块的目录列表；techs 表示使用的技术列表；modules 表示打包的模块列表；deps 表示项目的依赖列表；bundles 表示构建的块的列表；params 表示其他配置。
集成 Webpack
通过 webpack 执行 bem-tools-core：
-------------- - -
------- -
-------- -
-
----- ----------------
------- ----------------------------------------------------------------------------------------------
--
--
--
--结语
本文介绍了 npm 包 bem-tools-core 的使用方法和相关命令。它是一个非常好用的工具，能够大幅度简化 BEM 命名的管理工作，使我们能够更加专注于业务逻辑。如果你正在使用 BEM 或者想要了解 BEM，那么 bem-tools-core 绝对是一个不可错过的工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb78bb5cbfe1ea06117c4