前端工程化是现代 web 开发不可分割的一部分,能够极大的提高开发效率和管理维护成本。其中,构建工具是不可或缺的一环。而在构建工具中,enb 是一款非常强大的构建工具,它能够将项目中零散的文件打包为静态资源,并能够增量编译,因此十分适合大型项目中使用。enb 中的模块化技术也相当先进,支持 BEM 的模块化方式,这使得在大型项目中管理和维护模块非常容易。
而 enb-bemtree-to-html 则是 enb 中的 babel 技术的一种扩展,能够将 enb 中的 bemtree 模板文件编译为可直接在浏览器中执行的 html 文件。该插件可以极大地提高前端工程师的生产效率,同时增加代码的可维护性,减少代码重复度。
本文将详细介绍 npm 包 enb-bemtree-to-html 的使用方法,并带有代码示例,希望能帮助大家快速上手,提高前端开发效率。
安装
安装 enb-bemtree-to-html 只需要执行 npm 命令即可,具体如下:
--- ------- ---------- -------------------
配置
配置文件是使用 enb-bemtree-to-html 的一个重要环节。首先需要在 enb 项目根目录下创建一个 .enb/make.js
文件,并在其中定义 enb-bemtree-to-html 的规则:
-------------- - ---------------- - --------------------------- -------------------- - --------------------- -- - ------- --- ------- - ----------------------------------------------- -- -- - ------- --- ---- - -------------------------------------------- -- -- -- --------------------- ------- ------------ ---- - ---------------------------------------------------- -- --- ----------------------- -- -- -------------------- - -------------------- ------------------------- ------------------------ --- --- -
模板文件
在 enb 项目中使用 bemtree 模板。bemtree 是一种特殊的 html 模板,它将被转换为可直接在浏览器中执行的 js 文件。bemtree 模板文件简单而强大,它能够根据输入的数据生成 html 代码,并且支持一些前端框架中常用的功能,例如循环和条件处理等。
下面是一个简单的 bemtree 模板示例:
---------------- ---------------- -------------------- - ------ - - ------ ------- -------- --- ----- -- - ------ ------ -------- - - ----- ------- -------- ------- ---- --- -- - ----- ------- -------- -------- ---- -------- -- - ----- ------- -------- ---------- ---- ---------- - - - -- -- -- -------------- ------------ -------------------- - ------ ----------------- -- -- ------------- ------------- -------------------- - --- ----- - ---------------- -- --- ------ ------------------------ - ------ - ----- ------- -------- - ----- ------- -------- ------------- ------ - ----- -------- - - -- --- -- --
命令行
在终端中执行以下命令:
--- --- --- ----
这个命令将会开始 enb 的 make 过程,包括 es6 编译、bemtree 文件编译等,最终生成的文件将被放置在 ?.browser.bemtree.html
和 ?.browser.bemhtml.html
中。
在你的 html 文件中引用这些文件即可开始渲染视图。
总结
enb-bemtree-to-html 是一个十分实用的 npm 包,它可以让我们使用 bemtree 模板编写页面,并在浏览器端实时渲染,从而提高了前端工程师的生产效率。本文从安装、配置、命令行等方面介绍了 enb-bemtree-to-html 的使用方法,并给出了示例代码。如果你使用 enb 做前端构建,强烈建议使用这个插件,它会让你的工作更加轻松、高效!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600672673660cf7123b36577