在现代的前端开发中，构建工具是一个不可或缺的部分。它们可以自动化从源代码到最终部署的所有流程，并帮助开发者高效地使用新技术。其中，Rollup 是一个非常好用的构建工具，可以将 JavaScript 模块打包成浏览器和 Node.js 可以理解的代码。@northbrook/rollup 是 Rollup 的一个 npm 包，本文将介绍如何使用它。
什么是 Rollup
为了更好地理解 @northbrook/rollup 这个包，我们先来了解一下 Rollup 是什么。Rollup 是一个可以将 JavaScript 模块打包成浏览器和 Node.js 可以理解的代码的构建工具。它与其他主流构建工具（比如 webpack 和 Browserify）相比最大的特点就是使用 ES6 的模块语法作为其输入源，而不是 CommonJS 或 AMD。
别误会了，Rollup 并不是说你只能用 ES6 的模块语法。Rollup 支持 CommonJS、AMD、UMD 等格式的模块，只是警告你使用 ES6 模块可以使 Rollup 显著提高效率。那么，Rollup 有什么优势呢？
- 打包后的体积更小：只打包你实际用到的代码而不是暴力地把所有依赖都打包进去。
- 可靠性更高：ES6 的模块语法有一个非常大的特点：它们是静态的（译注：即只有在代码静态分析时才能知道一个模块的具体形态）。这使得 Rollup 可以大大减少重复代码的出现，以及其他一些优化。
- 构建速度更快：Rollup 只需要解析你实际使用到的文件，而不需要处理整个工程的所有文件，因此速度更快。
好的，我们已经简单地了解了 Rollup。接下来就要了解使用 @northbrook/rollup 打包工具来快速使用 Rollup。
如何使用 @northbrook/rollup
@northbrook/rollup 是 rollup.js 的一个 CLI 工具，使用 @northbrook/rollup 可以方便快捷地打包你的 JavaScript 应用程序和库。
安装
首先，你需要在全局安装 @northbrook/rollup：
--- ------- -------- ------------------
安装完成后，你可以通过 nb rollup 来验证是否安装成功。如果安装正常，它应该会打印出帮助信息。
使用
使用 @northbrook/rollup 很简单，只需要在你的项目根目录下创建一个 rollup.config.js 文件，配置一些基本的选项，就可以使用它了。
-- ----------------
------ ----- ---- ----------------------
------ -------- ---- -------------------------
------ ------- ---- -----------------------------
------ ------- ---- ------------------------
------ -------- ---- -----------------------
----- ------ - -------------------- --- -------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- ------------
---------- ------
--
-------- -
---------
----------------------- ------------------------------------
---
-------
-------- -----------------
---
----------
----------
-------- --------------
---
------ -- --------
-
-上面是一个简单的 rollup.config.js 文件，它包含了一些最基本的配置选项。解释一下：
input: 入口文件，可以是单个文件或一个包含多个文件的文件夹。output: 输出文件的选项。file: 输出的文件名。format: 指定输出格式。（可以是 amd, cjs, es, iife, umd）name: 指定导出名称。如果你想创建一个指定名称的 UMD 包，就需要设置这个值；其他是可选的。sourcemap: 是否生成 sourcemap。
plugins: 插件列表，可以用于 Tranform/Load 的钩子。replace: 替换文件中的字符串。babel: 将 ES6 代码转化为 ES5，可以使用 babelrc 配置 Babel。resolve: 方便定位 node_modules 依赖。commonjs: 将 CommonJS 模块转换成 ES2015 供 Rollup 处理。uglify: 压缩代码，默认使用 UglifyES
最后，运行 nb rollup 命令即可完成对 JavaScript 应用程序或库的打包。
- -- ------
总结
在本文中，我们学习了如何使用 Rollup 构建工具将 JavaScript 模块打包成浏览器和 Node.js 可以理解的代码，并且介绍了如何使用 @northbrook/rollup 包快速打包 JavaScript 应用程序和库。希望这篇文章能够帮助你更好地使用 Rollup 构建你的应用程序和库，提高效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5ef0c648efcef77a054b7615