简介
enb-bemify-es2015 是一个基于 enb 的 npm 包，它可以将 BEM 的 CSS 和 JS 模块进行处理，使得它们可以在浏览器端自动运行。
本文将介绍如何使用 enb-bemify-es2015，包括其安装和配置，以及一些常见问题的解决方案和代码示例。
安装和配置
enb-bemify-es2015 是一个 npm 包，可以通过以下命令进行安装：
npm install --save-dev enb-bemify-es2015
安装完成后，需要将 enb-bemify-es2015 添加到 enb 的配置中，以使其可以识别和处理 BEM 的 CSS 和 JS 模块。
在使用 enb-bemify-es2015 之前，首先需要使用 enb 安装和配置，在此不再赘述。
使用 enb-bemify-es2015 的基本配置如下：
-- -------------------- ---- ------- -- ------------ ----- --------------- - ----------------------------- -------------- - ---------------- - ------------------- -------------------- - ------------------------------------ - ----------- ----- ---------- ----- ---- --- --展开代码
在上述配置中，我们通过 addTech 方法将 enb-bemify-es2015 添加到了项目中，并指定了其处理 BEM 的 CSS 和 JS 模块的能力。
其中，cssModules 和 jsModules 分别控制样式和脚本是否为模块化，建议设置为 true。
使用说明
enb-bemify-es2015 是一个非常方便的工具，使用它处理 BEM 的 CSS 和 JS 模块非常简单。
CSS 模块
在 BEM 中，每个元素都应该有一个唯一的 class，以便样式的应用和修改。enb-bemify-es2015 可以将 CSS 中的 BEM 类名转换为哈希类名，以保证 class 的唯一性。
例如，我们有以下样式文件 page.css：
.block { background: #f00; } .block__element { color: #fff; }
通过 enb-bemify-es2015 处理后，转换后的样式如下：
._2aqyo { background: #f00; } ._2aqyo_ah9ge { color: #fff; }
可以看到，BEM 类名 block 和 block__element 分别转换为了哈希类名 _2aqyo 和 _2aqyo_ah9ge。
JS 模块
enb-bemify-es2015 还可以处理 BEM 的 JS 模块，它能够自动为 JS 模块添加前缀，使得我们可以方便地访问到模块内部的元素和事件。
例如，我们有以下 JS 文件 page.js：
BEM.DOM.decl('page', { onElemClick: function() { this.findElem('element').css('background', '#f00'); }, });
通过 enb-bemify-es2015 处理后，转换后的代码如下：
BEM.DOM.decl('_page', { onElemClick: function() { this.findElem('_element').css('background', '#f00'); }, });
可以看到，BEM 类名 page 和 element 均添加了前缀下划线 _，以保证唯一性和可访问性。
常见问题
在使用 enb-bemify-es2015 的过程中，可能会遇到一些问题，下面是一些常见问题的解决方案：
无法解析 BEM 类名
如果样式文件中的 BEM 类名没有被正确解析成哈希类名，可以尝试在 enb 的配置文件中为 enb-bemify-es2015 添加以下选项：
-- -------------------- ---- ------- -- ------------ ----- --------------- - ----------------------------- -------------- - ---------------- - ------------------- -------------------- - ------------------------------------ - ----------- ----- ---------- ----- ----------- ---------- ---- --- --展开代码
其中，cssRequire 的路径应该是样式文件的相对路径。
无法识别 BEM 的 JS 模块
如果 JS 文件中的 BEM 类名没有被正确前缀化，可以尝试在 enb 的配置文件中为 enb-bemify-es2015 添加以下选项：
-- -------------------- ---- ------- -- ------------ ----- --------------- - ----------------------------- -------------- - ---------------- - ------------------- -------------------- - ------------------------------------ - ----------- ----- ---------- ----- ----------- ------ ---- --- --展开代码
其中，exportName 为 JS 模块的导出名称，建议设置为 BEM。
结语
enb-bemify-es2015 是一个非常好用的 npm 包，它可以为我们提供很好的 BEM 支持，让我们可以更方便地开发和维护 BEM 项目。
希望本文介绍的内容对读者有所帮助，如果有任何疑问或者建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da24e
