rollup设计初衷和适用场景

1,153 阅读2分钟

前面文章我们讨论了webpack的用法和实现原理,这一篇介绍的rollup是另一个打包器,有了之前的基础,rollup的使用就很简单了,因此相关用法请参考官方文档
这一篇我们讨论一些别的,本文参考

设计初衷

和其他打包器实现的功能一样,都是把所有模块组合在一起,解决全局作用域和依赖关系等问题。rollup是在es6的模块语法产生后诞生的,即使用es module的语法编写,可以导出其他各种语法的bundle。

rollup设计之初相对于其他打包器由如下不同

  • 输出文件组织形式不同,其他打包器,比如webpack会在输出文件中实现自定义的require函数,将各个模块的代码添加进行进一步包装,这种处理会对bundle的大小带来明显问题;而rollup只是将它们在同一个文件中按顺序解决依赖关系,重命名解决全局作用域问题,不会添加另外的代码。
  • es6的模块化语法带来了tree shaking

rollup的使用相对webpack比较简单,文件输出比较小,因此作者推荐

Use webpack for apps, and Rollup for libraries

现状

上一章是在2017年时的情况,时间过去这么久有些结论不是很合适。
前面文章我们对当前版本的打包器做过评测,结论时就目前webpack和roolup实现的功能而言,两者已经不相上下。

对于webpack,争议最大的是使用很复杂,但由于使用量很大,生态做的很好,对于各种场景的问题能够良好的解决。rollup在我们常用的各种轮子中,比如react,vue,乃至尤雨溪新出的轮子vitejs中都在使用,各位可以根据实际情况选取。