随着前端开发的发展，我们需要更好的工具来提高开发效率和代码质量。enb-transpiler 是一个优秀的 npm 包，它可以将 enb 构建系统支持的 bemjson 文件转换成可执行的 js 文件，从而优化前端代码的质量和性能。本教程将介绍如何使用 enb-transpiler 提高前端开发效率和代码优化。
安装
使用 npm 安装 enb-transpiler：
npm install enb-transpiler --save-dev
使用
在项目中使用 enb-transpiler，需要在 enb 配置中注册该 npm 包：
var enbTranspiler = require('enb-transpiler');
// enb 配置
module.exports = function(config) {
// 注册 enb-transpiler
config.module('enb').addTarget('js', [enbTranspiler, require('enb/techs/js')]);
};这里注册了 enb-transpiler 和 enb/techs/js 两个 Target。
为了演示 enb-transpiler 的使用，我们来创建一个简单的 demo。
创建 demo
创建 index.bemjson.js 文件，添加以下内容：
module.exports = {
block: 'hello',
content: {
block: 'world'
}
};这是标准 bemjson 的示例代码，其中有两个 block： hello 和 world。
接着，创建 hello.js 文件，添加以下内容：
console.log('hello');接着，创建 world.js 文件，添加以下内容：
console.log('world');接着，创建 enb-make.js 文件，添加以下内容：
-- -------------------- ---- -------
--- ----------- - -------------------------
--- ------------- - --------------------------
-------------- - ---------------- -
--------------------------------------
-----------------------------
--------------------------
---------
--------------- ----------- ------------- ----------
---
--------------------------------------------------------------------
-- -- ---------------
------------------------------------ --------------- --------------------------
------------------------ -------------------- -
---------------------
----------------------------- - ------- ----------------- ---
--------------------
-------------------
--------------------
-- -- --------------- -- -- --
--------------- -
--------------- -------
------- -----
------------ -
--- -
------- ----------
---------- -----
------------------------ ----
-
-
---
------------------------- - ------- ----------------- ---
--------------------------------- - ------- ------- ---
-------------------------------- - ------------- -------- ----------- -------- --
---
-------------------------------- ------------------- -------------
---
--
-------- ----------------- -
------ -
--------------------------------------
---------------------------------------
--------------------------------------------
---------------------------------------------
---------------------------------------------------
----------------------------------------------------
----------------
----------------
--------------------- -
------ --------------------------
---
-enb-make.js 文件中定义了项目使用的 enb-bem-techs 和 enbTranspiler。enbTranspiler 是我们安装的 npm 包。
接下来，使用 enb 构建系统编译 demo 代码：
./node_modules/.bin/enb make bundles/index
注意：请使用相对路径运行上述命令，根据实际情况确定终端窗口的工作目录。
这时候，我们可以在控制台中看到 enb 的输出，如果看到类似下面的输出，则表示你可以开始运行 demo 了：
bundles/index/env.js: {"build":..., "context":..., "dependOnThis":..., "__filename":".../bundles/index/env.js", "__dirname":".../bundles/index"}
bundles/index/config.js: {Levels:..., "sourceSuffixes":..., "formats":..., "storeConfig":..., "config":..., "__filename":".../bundles/index/config.js", "__dirname":".../bundles/index"}
bundles/index/nodes/index.bundles/index/index.js: (function module(){...}), {{techs: [...]}},
bundles/index/nodes/index.bundles/index/index.css: 'body{background-color:#555}\n\n'在 demo 的生成目录 bundles/index 中，会生成三个文件：
- index.nx.bemhtml.js - BEMHTML 转义模板文件
- index.nx.js - enb-transpile 转义后的 js 文件
- index.css - 编译后的 css 文件
运行 demo
我们可以在浏览器中打开 bundles/index/index.html 文件来运行 demo，但是注意，要在 web 服务器下运行，否则可能出现跨域请求问题。如果你想在本地运行 demo，推荐使用 http-server 工具：
npm install -g http-server
然后使用 http-server 启动 web 服务器：
cd bundles/index http-server
打开浏览器，输入 http://localhost:8080/index.html 地址，你就可以看到输出结果：
hello world
总结
使用 enb-transpiler 可以将 enb 构建系统支持的 bemjson 文件转换成可执行的 js 文件，从而优化前端代码的质量和性能。本教程介绍了 enb-transpiler 的使用方法，并提供了示例代码和演示。但要注意，在使用 enb-transpiler 时，需要结合适当的 enb 配置来使用。希望教程对你有所帮助，祝你编写出更漂亮、更高效、更有价值的前端代码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f28