Rollup 打包工具笔记

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，以便在浏览器中使用或在 Node.js 中使用。

文档

Demo

使用

发现代码被压缩了，默认是不压缩的，看一下代码里面有没有 terser

import { terser } from 'rollup-plugin-terser';

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

// 插件中添加 terser
terser();

后记

对比 webpack 和 rollup

https://blog.51cto.com/zhoulujun/5417708#:~:text=rollup%3A%20%E5%BC%BA%E8%B0%83%E5%AF%B9%E5%BA%93%E5%BC%80%E5%8F%91,%E9%9C%80%E8%A6%81%E4%BE%9D%E8%B5%96%E5%90%84%E7%A7%8D%E6%8F%92%E4%BB%B6%E3%80%82
webpack 适⽤于⼤型复杂的前端站点构建：webpack 有强⼤的 loader 和插件⽣态，打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。⽴即执行函数内部则处理模块之间的引⽤，执⾏模块等，这种情况更适合⽂件依赖复杂的应⽤开发.
rollup 适⽤于基础库的打包，如 vue、d3 等：Rollup 就是将各个模块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码，可以最⼤程度上降低代码体积，但是 rollup 没有 webpack 如此多的的如代码分割、按需加载等⾼级功能，其更聚焦于库的打包，因此更适合库的开发.
parcel 适⽤于简单的实验性项⽬：他可以满⾜低⻔槛的快速看到效果，但是⽣态差、报错信息不够全⾯都是他的硬伤，除了⼀些玩具项⽬或者实验项⽬不建议使⽤

Rollup 打包工具笔记

文档

Demo

使用

后记

对比 webpack 和 rollup

其他