前端开发中使用 BEM 管理 CSS 样式是一种非常好的实践方式。enb-bem-techs 是一个 npm 包,它为 BEM 技术提供了构建工具支持。在这篇文章中,我们将带您深入了解 enb-bem-techs 的使用,包括安装、配置、常见用例和示例代码。
安装
在使用 enb-bem-techs 之前,您需要确保已经安装过 Node.js、npm 和 enb。然后,可以使用以下命令来进行 enb-bem-techs 的安装:
npm install --save-dev 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