1.为什么要学习rollup.js

rollup.js是Javascript的ES模块打包器，我们熟知的Vue、React等诸多知名框架或类库都通过rollup.js进行打包。与Webpack偏向于应用打包的定位不同，rollup.js更专注于Javascript类库打包（虽然rollup.js也可以提供资源打包，但显然这不是它的强项）。在我们学习Vue和React等框架源码或者自己编写Javascript类库时，rollup.js是一条必经之路。

适用范围：

  • 只想快速配置开发个小工具
  • 要用ES6+语法开发
  • 代码清洁，清理无用代码(tree-shaking)

2.rollup.js的工作原理

rollup.js可以将我们自己编写的Javascript代码（通过插件可以支持更多语言，如Tyepscript）与第三方模块打包在一起，形成一个文件，该文件可以是一个库（Library）或者一个应用（App），在打包过程中可以应用各类插件实现特定功能。下图揭示了rollup.js的运行机制：
5bed3c04000191cc08980323.jpg

3.安装rollup.js

  1. npm i rollup -g

4.rollup插件机制

1.完整的构建过程

Rollup 会先进入到 Build 阶段，解析各模块的内容及依赖关系，然后进入Output阶段，完成打包及输出的过程。

2.hook类型

  • Build Hook
    • Build Hook即在Build阶段执行的钩子函数，在这个阶段主要进行模块代码的转换、AST 解析以及模块依赖的解析，那么这个阶段的 Hook 对于代码的操作粒度一般为模块级别，也就是单文件级别。
  • Output Hook
    • Ouput Hook(官方称为Output Generation Hook)，则主要进行代码的打包，对于代码而言，操作粒度一般为 chunk级别(一个 chunk 通常指很多文件打包到一起的产物)。

3.插件分类

  • Async (异步)
  • Sync(同步)
  • Parallel (并行)
  • Squential (串行)
  • First

4.Build 阶段工作流