如何使用Rollup打包JavaScript

Posted 2023-04-24

参考技术A export default entry: 'src/scripts/main.js', dest: 'build/js/main.min.js', format: 'iife', sourceMap: 'inline',;新建rollup.config.js，然后填入上面的内容

entry — 希望Rollup处理的文件路径。大多数应用中，它将是入口文件，初始化所有东西并启动应用。
dest — 编译完的文件需要被存放的路径。
format — Rollup支持多种输出格式。因为我们是要在浏览器中使用，需要使用立即执行函数表达式(IIFE)[注1]
sourceMap — 调试时sourcemap是非常有用的。这个配置项会在生成文件中添加一个sourcemap，让开发更方便。

更多请查看此文：http://www.w3cplus.com/javascript/learn-rollup-js.html
作者讲得非常的棒！

Vue 是如何用 Rollup 打包的？

Rollup 是一个 JavaScript 模块打包器，它将小块的代码编译并合并成更大、更复杂的代码，比如打包一个库或应用程序。它使用的是 ES Modules 模块化标准，而不是之前的模块化方案，如 CommonJS 和 AMD。ES 模块可以让你自由、无缝地使用你最喜爱库中那些最有用的独立函数，而让你的项目无需包含其他未使用的代码。

近期在团队内组织学习 Rollup 专题，在着重介绍了 Rollup 核心概念和插件的 Hooks 机制后，为了让小伙伴们能够深入了解 Rollup 在实际项目中的应用。我们就把目光转向了优秀的开源项目，之后就选择了尤大的 Vue/Vite/Vue3 项目，接下来本文将先介绍 Rollup 在 Vue 中的应用。

项目根目录下的 package.json 文件中，我们可以找到 scripts 字段，在该字段内定义了如何构建 Vue 项目的相关脚本。

命令为例，来介绍一下与 rollup 相关的配置项：
-c：指定 rollup 打包的配置文件；
-w：开启监听模式，当文件发生变化的时候，会自动打包；
--environment：设置环境变量，设置后可以通过 process.env 对象来获取已配置的值。
由 dev 命令可知 rollup 的配置文件是 scripts/config.js：
有值的话，就会根据 TARGET 的值动态生成打包配置对象。
函数内部，会从 builds 对象中获取当前目标对应的构建配置对象。当目标为 \'web-full-dev\' 时，它对应的配置对象如下所示：
（输出文件）、format（输出格式）等信息。当获取构建配置对象后，就根据 rollup 的要求生成对应的配置对象。
需要注意的是，在 Vue 项目的根目录中是没有 web 目录的，该项目的目录结构如下所示：
入口文件的位置在哪呢？其实是利用了 rollup 的 @rollup/plugin-alias 插件为地址取了个别名。具体的映射规则被定义在 scripts/alias.js 文件中：
别名对应的路径，该路径对应的文件结构如下：
对象，相信你也知道了 Vue 是如何打包不同类型的文件，以满足不同场景的需求，比如含有编译器和不包含编译器的版本。分析完 dev 命令的处理流程，下面我来分析 build 命令。
的 scripts 字段，我们可以找到 build 命令的定义：
命令时，会使用 node 应用程序执行 scripts/build.js 文件：
文件中，会先获取所有的构建目标，然后根据进行过滤操作，最后再调用 build 函数进行构建操作，该函数的处理逻辑也很简单，就是遍历构建列表，然后调用 buildEntry 函数执行构建操作。
函数执行时，就会开始调用 buildEntry 函数，在该函数内部就是根据传入了配置对象调用 rollup.rollup API 进行构建操作：
函数中是通过调用 write 函数来生成文件：
函数内部是通过 fs.writeFile 函数来生成文件，该函数还支持 zip 参数，用于输出经过 gzip 压缩后的大小。现在我们已经分析完了 dev 和 build 命令，最后我们来简单介绍一下构建过程中所使用的一些核心插件。
 文件中，我们可以看到 Vue2 项目中用到的 rollup 插件：
插件在前面我们已经知道它的作用了。而其他插件的作用如下：
rollup-plugin-buble：该插件使用 buble 转换 ES2015 代码，它已经被移到新的仓库 @rollup/plugin-buble；
rollup-plugin-commonjs：该插件用于把 CommonJS 模块转换为 ES6 Modules，它已经移到新的仓库 @rollup/plugin-commonjs；
rollup-plugin-flow-no-whitespace：该插件用于移除 flow types 中的空格；
rollup-plugin-node-resolve：该插件用于支持使用 node_modules 中第三方模块，会使用 Node 模块解析算法来定位模块。它也被移动到新的仓库 @rollup/plugin-node-resolve；
rollup-plugin-replace：该插件用于在打包时执行字符串替换操作，它也被移动到新的仓库 @rollup/plugin-replace。
除了以上的插件，在实际的项目中，你也可以使用 Rollup 官方仓库提供的插件，来实现对应的功能，具体如下图所示（仅包含部分插件）：
（来源：https://github.com/rollup/plugins）
总结
本文只是简单介绍了 Rollup 在 Vue 2 中的应用，很多细节并没有展开介绍，感兴趣的小伙伴可以自行学习一下。如果遇到问题的话，欢迎跟我一起交流哈。另外，你们也可以自行分析一下在 Vue 3 和 Vite 项目中是如何利用 Rollup 进行打包的。