rollup 原理解析
✨专栏介绍
Rollup专栏是一个专门介绍Rollup打包工具的系列文章。Rollup是一个现代化的JavaScript模块打包工具，它可以将多个模块打包成一个或多个文件，以提高应用程序的性能和加载速度。
在Rollup专栏中，您将学习到如何安装和配置Rollup，以及如何使用它来打包JavaScript模块。我们将深入探讨不同类型的模块（如CommonJS、ES6等）的处理方式，以及如何处理依赖关系和循环引用。
此外，我们还将介绍一些常用的插件和配置选项，以帮助您更好地使用Rollup。您将学习到如何使用动态导入来实现按需加载，如何优化打包结果以减小文件大小，并了解与其他工具（如Babel、TypeScript等）集成使用的技巧。
通过阅读Rollup专栏，您将掌握使用这个强大工具的基本知识，并学会一些高级特性和技巧。让我们一起开始吧！
文章目录
-
- ✨专栏介绍
- 引言
- 概览
- 工作原理
- 快速开始
-
- 安装rollup
- 基本命令行
- demo示例
- 摇树优化(tree shaking)
- 总结
- 写在结尾
引言
Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的工作原理、使用方法、摇树优化(tree shaking)。
概览
Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做。
工作原理
1. 解析入口文件：Rollup首先会解析指定的入口文件，找到其中的导入语句和导出语句。它会构建一个模块依赖图，记录每个模块之间的依赖关系。
2. 递归解析依赖：Rollup会递归地解析每个模块的依赖关系，直到所有依赖都被解析完毕。这样就可以构建出完整的模块依赖图。
3. Tree Shaking：在构建完模块依赖图后，Rollup会进行Tree Shaking操作。它会分析每个模块中导出和导入的变量，并标记哪些变量被使用了。然后，在生成最终文件时，只有被标记为使用过的变量才会被保留下来。这样可以消除未使用的代码，减少最终文件的大小和加载时间。
4. 模块合并：根据模块依赖图和Tree Shaking结果，Rollup将所有需要保留下来的代码合并成一个或多个文件。这些文件可以是ES6模块、CommonJS模块或AMD模块等不同格式。
5. 输出最终文件：最后，Rollup将合并后的代码输出到指定的文件中。可以通过配置选项来指定输出文件的路径、格式和名称等。
Rollup的工作原理与其他打包工具类似，但它的Tree Shaking技术使得生成的代码更小、更高效。通过消除未使用的代码，Rollup可以生成更精简、更快速的JavaScript文件，提高应用程序的性能和加载速度。
快速开始
安装rollup
全局安装
npm install -g rollup
项目安装
npm install -D rollup
基本命令行
查看可用选项和参数
npx rollup -h
部分可用选项和参数：
demo示例
.
├── package.json
└── src
├── index.js
└── util.js
index.js
import { getRandomNum } from "./util.js";
const r = getRandomNum(1, 10)
console.log(r)
util.js
/**
* 随机数
* @param {*} min 最小值
* @param {*} max 最大值
* @returns min-max之间的随机整数
*/
export const getRandomNum = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
* 深拷贝
* @param obj 需要深拷贝的对象
* @returns 深拷贝对象
*/
export const deepClone = (obj) => {
if(typeof obj !== 'object' || obj === null) {
return obj
}
const result = Array.isArray(obj) ? [] : {};
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
}
export default {getRandomNum,deepClone}
执行命令输出到bundle.js
npx rollup src/index.js --file dist/bundle.js
可以看到打印结果基本和源码相差不大，而且，自动做了摇树优化，也就是把没有用到的代码自动的删除了。
dist/bundle.js
/**
* 随机数
* @param {*} min 最小值
* @param {*} max 最大值
* @returns min-max之间的随机整数
*/
const getRandomNum = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
const r = getRandomNum(1, 10);
console.log(r);
另外还可以选择编译的格式：
对于浏览器：
# 编译为包含自执行函数（'iife'）的