简介
npm 是一个 Node.js 最大的包管理器，它的目标是为 JavaScript 开发者提供更加优秀的代码库和开发工具。其中 gobble-rollup 是一个组合使用 gobble 和 Rollup 的 npm 包，它可以帮助前端工程师更好的编写和打包 JavaScript 代码。
本篇文章将会介绍 gobble-rollup 的安装和使用，结合代码示例详细讲解 gobble-rollup 常见的使用场景以及注意事项。
安装
使用 gobble-rollup 之前，需要先确保本地已经安装了 Node.js，然后使用 npm 安装 gobble-rollup：
npm install gobble-rollup
快速开始
安装完 gobble-rollup 后，我们来看看怎么将它应用到我们的项目中。首先，我们需要在 gulpfile 里使用 gobble-rollup 来打包 JavaScript 代码。下面是一个示例 gulpfile：
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - -------------------------
-- -- --- --
----- --- - --------------
-- -- ------------- -- --- ------- -- --
----- ------ - ----------------------- -
------ -----------
------- -----
---
-- ----- -- ----- ---- ----
----------------------------------------在上述示例中，我们首先通过 gobble 函数创建了一个代表项目根目录下 src 文件夹的 Gobble 实例。在这个实例上，我们使用了 gobble-rollup 转换插件来打包 JS 文件。在此过程中，我们将 entry（入口文件）设置为 index.js，将 format 设置为 umd 来支持导出到浏览器全局变量中。
打包好的 JS 文件最后会被压缩并保持在 dist 文件夹下，我们只需要将 dist 文件夹直接提供给浏览器即可使用。
使用场景
打包压缩
使用 gobble-rollup 打包压缩 JS 文件是最常见的应用场景。通过将多个 JS 文件打包成一个或几个，可以减少 HTTP 请求的数量，并且将代码压缩后可以减少文件大小，加速页面的加载速度。可以使用以下示例代码来使用 gobble-rollup 来打包压缩 JS 文件：
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - -------------------------
-- -- --- --
----- --- - --------------
-- -- ------------- -- --- ------- -- --
----- ------ - ----------------------- -
------ -----------
------- -----
---
-- ----- -- ----- ---- ----
----------------------------------------转换模块
gobble-rollup 还可以将模块转换为其他模块格式，例如 ES6，AMD，CommonJS，Node.js 模块和类型等。这是一个完美的方式来编写和测试模块化代码，以及使用辅助工具测试器和开发环境。使用 gobble-rollup 转换模块的示例如下：
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - -------------------------
-- -- --- --
----- --- - --------------
-- -- ------------- --- -------- ------ ---- ----
----- ------ - ----------------------- -
------ -----------
------- -----
----------------编译 Less 和 Sass
gobble-rollup 还可以用来处理 Less 和 Sass。它通常只配合使用 gobble 的 LESS 和 Sass 转换器。使用 gobble-rollup 编译 Less 和 Sass 的示例如下：
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - -------------------------
----- ---- - -----------------------
----- ---- - -----------------------
-- -- --- --
----- --- - --------------
-- -- ----------- -- ---- ----- ------------- ----
----- ---------- - ------------------------------------------------------------ -
------ -----------
------- -----
---------------------
-- -- ----------- -- ---- ----- ------------- ----
----- ---------- - ------------------------------------------------------------ -
------ -----------
------- -----
---------------------请注意，在上述示例代码中，我们先使用 include 方法仅仅选择了 Less 或 Sass 文件，然后使用 gobble-less 和 gobble-sass 转换器将 Less 或 Sass 代码编译成 CSS 代码。最后，我们使用 gobble-rollup 将编译好的 CSS 代码打包。
注意事项
如果您需要在多个项目中使用 gobble-rollup，可以将其安装到全局，这样就可以在不同的项目中使用 gobble-rollup 了：
npm install gobble-rollup -g
在使用 gobble-rollup 进行资源打包时，尽量使用相对路径，避免因为绝对路径引起打包上的问题。
推荐将 gobble-rollup 作为 gulp 或者 grunt 的一个插件去使用。
总结
通过本文例子，相信大家已经了解了 gobble-rollup 的一些基本使用方法。使用 gobble-rollup 构建前端应用并打包压缩文件以及编译 Less 和 Sass 是非常容易的，而且在多数情况下都能表现出良好的性能。当然，gobble-rollup 并不是完整的前端开发解决方案，任何工具都不是完美的，需要深入理解才能更好地掌握这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77424