在前端开发中，我们经常需要将 HTML 模板、ES6 代码转换成浏览器可执行的 JavaScript。gobble-jade-es6 就是一个方便快捷的 npm 包，它提供了将 Jade 和 ES6 编译成 JavaScript 的功能，下面将为大家介绍该包的使用方法。
安装
使用 npm 命令安装 gobble-jade-es6：
npm install gobble-jade-es6 --save-dev
基本使用
在项目中创建 gobblefile.js 文件，使用 gobble-jade-es6 编译 Jade 和 ES6 文件：
const gobble = require("gobble");
const jade = require("gobble-jade-es6");
module.exports = gobble("src")
.transform("jade", jade({ pretty: true }))
.transform("babel", babel());在上面的代码中，我们先引入了 gobble 和 gobble-jade-es6 的依赖，并初始化了 gobble 对象。接着，我们使用 transform 方法依次转换 Jade 和 ES6 文件。在 Jade 转换中，我们传递了 pretty:true 选项，以便帮助我们生成可读性更好的 HTML 代码；在 ES6 转换中，我们使用了 babel 转换器，将 ES6 代码转换为浏览器可以执行的 ES5 代码。
高级使用
处理多个目录
如果我们的项目中有多个文件夹需要转换，或者需要过滤掉一些文件夹，我们可以使用 gobble 的 map 方法对目录进行处理，代码如下：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ---- - --------------------------- ----- --- - -------------- ----- ---------- - --- ------------ ------ ------- ---- --- ----------- --------- ----- -- - ---------- ------------------- ----------------------------- -------------------- ---------- -------------- - ------------------- -----
在上面的代码中，我们使用 map 方法对 src 目录进行转换，并且筛选出了 JavaScript 文件。接着，我们使用 exclude 方法过滤掉 node_modules 目录下的文件，并通过调用 transform 方法对 JS 文件进行压缩。
处理多个 Jade 文件
如果我们的项目中有多个 Jade 文件需要转换，我们可以使用 rollup.js 和 gobble-jade-es6 一起使用。接下来就是一个例子：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ---- - --------------------------- ----- ------ - ------------------ ----- ------ - --------------- ------ -------------- -------- --- --- ----- -------- - --------------- ------ ------- ----- ------------------------ ---- -------------- - ---------
在上面的代码中，我们使用 rollup.js 将 main.js 转换为可执行的 JavaScript 代码，并与 gobble-jade-es6 一起使用。接着，我们使用 transform 方法对生成的代码进行压缩。
总结
gobble-jade-es6 是一个方便快捷的 npm 包，能够将 Jade 和 ES6 代码转换为浏览器可执行的 JavaScript 代码。使用该包需要注意的是，需要先安装 gobble 和 gobble-jade-es6 的依赖，然后在 gobblefile.js 文件中编写相关代码。高级使用需要使用到 lodash、rollup 等工具，需要有一定的工具链能力。希望本文介绍的方式能够帮助读者更好地使用 gobble-jade-es6，提升项目开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee742c