钉子的生活日记
文章目录

Rollup 学习笔记

适合目标：掌握 Rollup 的核心思想、tree shaking、输出格式、库构建能力与面试表达。
学习定位：这一份偏“库构建、干净产物、底层打包器认知”。
学习原则：先分清 Rollup 和应用构建工具的边界，再理解它为什么仍然是库构建强者。

目录

  1. Rollup 是什么
  2. 为什么 Rollup 仍然值得学
  3. 核心能力
  4. 输出格式
  5. tree shaking
  6. 适用场景
  7. 配置与插件
  8. 常见问题
  9. 高频面试题
  10. 一页总结

1. Rollup 是什么

Rollup 是一个 JavaScript 模块打包器。
它的优势标签非常鲜明：

  1. tree shaking 强
  2. 输出产物干净
  3. 多格式输出能力强
  4. 插件生态成熟

2. 为什么 Rollup 仍然值得学

虽然很多前端应用开发直接用 Vite，但 Rollup 仍然非常重要：

  1. 库构建高频
  2. 很多工具链有 Rollup 思想
  3. tree shaking 讲解时常会提到它
  4. Vite / Rolldown 生态与它强相关

3. 核心能力

3.1 干净产物

Rollup 非常擅长生成适合发布给其他项目消费的产物。

3.2 多格式输出

常见格式：

  1. esm
  2. cjs
  3. umd
  4. iife

3.3 tree shaking

Rollup 是树摇优化的重要代表工具之一。

4. 输出格式

4.1 ESM

现代前端和库构建最常见格式。

4.2 CJS

兼容 Node.js 老生态时常用。

4.3 UMD / IIFE

适合浏览器 script 直接引用等老场景。

4.4 为什么库构建特别看重这些格式

因为发布给别人用时，要兼容不同环境和工具链。

5. tree shaking

5.1 本质

在静态分析基础上移除未使用代码。

5.2 为什么 Rollup 在这个点上口碑好

因为它对 ESM 的静态结构利用得非常好，产物通常更干净。

5.3 tree shaking 生效前提

  1. 尽量使用 ESM
  2. 减少副作用代码
  3. 正确标记 side effects

6. 适用场景

6.1 最适合

  1. 组件库
  2. SDK
  3. 工具函数库
  4. 发布 npm 包

6.2 不一定最适合

  1. 超复杂大型应用的完整 dev/build 一体化体验
  2. 团队想开箱即用搭完整前端应用

7. 配置与插件

7.1 基本配置关注点

  1. input
  2. output
  3. external
  4. plugins

7.2 external 为什么重要

因为你不一定想把所有依赖都打进产物。
比如发布组件库时，常常要把 React、Vue 等设为外部依赖。

7.3 插件体系

Rollup 插件体系非常重要，也影响了后来的生态设计。

8. 常见问题

8.1 为什么产物里仍然有没用代码

看：

  1. 是否真的用 ESM
  2. 是否存在副作用
  3. 插件转换是否破坏静态分析

8.2 为什么库构建常选 Rollup

因为它擅长输出干净、可控、多格式的库产物。

9. 高频面试题

9.1 Rollup 和 Webpack 区别

常见答法：

  1. Webpack 更全能、更偏应用构建
  2. Rollup 更偏库构建、产物更干净

9.2 Rollup 为什么 tree shaking 好

因为它充分利用 ESM 的静态结构做更有效的死代码删除。

9.3 为什么现在还要学 Rollup

因为库构建、tree shaking、输出格式与现代 bundler 生态仍然强相关。

10. 一页总结

10.1 Rollup 的定位

库构建强者，tree shaking 代表工具。

10.2 记忆口诀

写应用先想 Vite，写库先想 Rollup。