rollup初体验
初次学习rollup
因为最近在学习vite的使用和一些与开源相关的知识，最终还是打算把这个技术栈（债）补上
为什么要学习rollup
rollup作为一款优秀的打包工具，同时提供cli、配置文件、js脚本执行的打包方式
同时它也实现了tree-shaking的支持
虽然在大型应用开发过程中的开发体验不及webpack，但是它用在打包一些小的工具库、开源包方面十分优秀
不过值得一提的是vite在打包方面采用了rollup，同时vite对rollup提供的接口进行了些许扩展，并且部分的rollup插件也已经实现了对vite的支持，vite的开发时体验是非常优秀的，足以弥补rollup开发时的不足之处
核心知识
inputOptions:
- external
- input
- plugins
- ………………
outputOptions:
- dir
- file
- format
- globals
- name
- plugins
rollup中 命令行输入\ 配置文件\ js Api之间存在一定的对应关系如
// rollup.config.js
export default {
input: 'src/main.js',
……
}
// build_script.js
const rollup = require('rollup')
const input = require('rollup.config.js').input
const inputOptions = { input }
const outputOptions = { ………… }
async function build() {
const bunld = await rollup.rollup(inputOptions)
await bundle.generate(outputOptions)
……
}
rollup -i ./src/main.js -f cjs
但并不是所有的指令与配置项都存在对应,源链解释
rollup 与 npm 集成
当一个要被打包的文件的导入模块中存在npm包，rollup并不知道要在node_modules中找到对应的文件
rollup-plugin-node-resolve：告诉rollup如何找到对应导入的npm
rollup-plugin-commonjs：使得cjs规范的npm能转换为es2015供rollup处理
plugins
https://github.com/rollup/awesome
plugin开发规范：https://rollupjs.org/guide/en/#conventions
一个rollup插件就是 一个符合规范的 + 带有rollup实现的钩子的对象
-
插件钩子带有 kind(async, first, sequential, parallel)决定了他们的执行方式
-
rollup在不同的工作时期具有许多的钩子如：
rollup.rollup激活build部分的钩子bundleObj.generate激活ouput generation部分的钩子，同时不同工作时期中的不同钩子也具有一定顺序