npm包 enb-bem-techs 使用教程

阅读时长 8 分钟读完

前端开发中使用 BEM 管理 CSS 样式是一种非常好的实践方式。enb-bem-techs 是一个 npm 包,它为 BEM 技术提供了构建工具支持。在这篇文章中,我们将带您深入了解 enb-bem-techs 的使用,包括安装、配置、常见用例和示例代码。

安装

在使用 enb-bem-techs 之前,您需要确保已经安装过 Node.js、npm 和 enb。然后,可以使用以下命令来进行 enb-bem-techs 的安装:

配置

在您的项目中,应该有一个 enb-make.js 文件。在这个文件中,您需要配置用到的 enb-bem-techs,并将其与其他 enb techs 组合起来。以下是一个简单的例子:

-- -------------------- ---- -------
----- ----------- - -------------------------

-------------- - -------- -- -
  -------------------------- ------------ -- -
    ---------------------
      -------------------- - ------- ---------- --- 
      -------------------
    ---
  ---
--

在此配置中,我们使用了两个 enb techs:enb-bem-techs 的 levels 和 files。其中,levels 确定了 BEM 层级的路径,而 files 则处理.less 和.bemdecl.js 文件,并生成 CSS 文件。

常见用例

enb-bem-techs 有很多种应用场景。下面我们将介绍其中的一些。

构建静态资源

enb-bem-techs 可以将所有静态资源(assets)的 BEM 类名及其依赖项解决方案转换为依赖于 CSS 文件的 HTML 标记,从而加入到 bundle 之中。这是使用 enb-bem-techs 最基本的用法:

-- -------------------- ---- -------
----- ----------- - -------------------------
----- ------ - -----------------------
----- --- - --------------------------------------------
----- ---- - ---------------------

-------------- - ---------------- -
    ------ ------------- -
        ------------------- -----
            ----- --------------- ---------
            ------- --------------------------
            ------------- -
                ---- --------
            --
            --------- -------
        ----

    --
--

多个项目多层级支持

每个项目都有自己的特定结构。enb-bem-techs 可以将各种形式的 BEM 依赖项转换为逐层结构,以适应不同的项目结构。这使得在不同项目中共享代码变得更加容易。

例如,假设您有一个传统的多页面项目和一个单页面项目。您可以将页面和组件放在不同的目录结构中,每个目录结构包含一个 BEM 层级。enb-bem-techs 允许您为不同的项目配置不同的层级路径。

-- -------------------- ---- -------
-------------------------- ------------ -- -
  ---------------------
      -------------------- -
          ------- -
              ----------------
              ---------------
          ------------- -- ------------ ----------- -------
      ---
      -------------------
  ---
---

------------------------ ------------ -- -
  ---------------------
      -------------------- -
          ------- -
              ----------------
              ---------------
          ------------- -- ------------ ----------- -------
      ---
      -------------------
  ---
---

根据块的类型打包

enb-bem-techs 允许您根据块的类型在不同的产出中打包不同的本地化块。这种特性基于 i18nMixin,它在给定块上的 bemhtml 转换过程中为没有相应地区或语言覆盖的块提供了本地化数据。

-- -------------------- ---- -------
----- ----------- - -------------------------

--- --------- - ----------------------------

-------------- - ---------------- -
    -------------------- -------------------- -
    ---------------------
        ---------------------
        -------------------- - ------- - 
            - ----- ---------------- ------ ---- --
            - ----- ------------- ------ ----- -
        - ---
        -------------------
        ------------------- - ---- - ----- ---
        --------------------- - ---- - -------------------- ---
        ------------------------- - ---- - ------ ------ - --------------- --
    ---
    -----------------------
        ---------------
    ---
    --------------------- -------------------- -
        ---------------------
            ---------------------
            -------------------- - ------- -
              - ----- --------------- --
              - ----- ------------- ------ ---- -
            - ---
            -------------------
            ------------------- - ---- - ---- ---
            --------------------- - ---- - -------------------- ---
            ------------------------- - ---- - ----- ------ - --------------- --
        ---
        -----------------------
            ---------------
        ---
    ---
  ---
--

示例代码

以下是一个基本的示例代码,它展示了如何使用 enb-bem-techs 将 LESS 文件转换为 CSS:

-- -------------------- ---- -------
----- ----------- - -------------------------
----- ------- - -----------------------------
----- ----------- - --------------------------------------------------

-------------- - -------- -- -
  -------------------------------- ------------ -- -
    ---------------------
      -------------------- - ------- ------------------ ---
      -------------------
      --------------------
      --------- - ------- ------- ---
      --------------
    ---
    ------------------------------- -----------
  ---
--

总结

enb-bem-techs 是一个非常好的构建工具,提供了各种各样的技术特性,多样化的用例与配置,并且可以胜任各种规模的项目。本文中,我们向您介绍了 enb-bem-techs 的一些基础、用例和示例代码,并希望对您有所帮助。如果您在使用 enb-bem-techs 时遇到了问题或有更多的问题,可以参考 enb-bem-techs 的官方文档或在社区中进行咨询。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066e22a563576b7b1ece53

纠错
反馈