npm 包 bem-tools-core 使用教程

阅读时长 4 分钟读完

随着项目复杂度和规模的不断增加,前端开发中使用 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

纠错
反馈