前言

我是如何与Rollup相遇的：

项目中一直用的都是webpack，用的更多的是基于webpack包装之后vue-cli。最近有一个需求就是加载远程组件，其实我的理解就是搞一个远程组件库。就是一个类库，于是乎就发现其实vue等各种类库其实就是用rollup来打包的。于是就快速上手了rollup。

什么是Rollup？

总体来说webpack和rollup在不同场景下，都能发挥自身优势作用。webpack对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)，而rollup并不支持。
所以当开发应用时可以优先选择webpack，但是rollup对于代码的Tree-shaking和ES6模块有着算法优势上的支持，若你项目只需要打包出一个简单的bundle包，并是基于ES6模块开发的，可以考虑使用rollup。如果你是想打包vue3组件库的话，这里我也会推荐vite 关于vite我们另外一篇文章再讲。

快速上手

• 使用 npm install --global rollup 进行安装

• 安装完后可以通过以下命令确认是否安装成功，若显示版本号说明可以正常使用Rollup了。
  rollup -version
  查看rollup相关参数，对照文档 rollup 中文文档地址
  rollup - h
  

  image.png

接下来贴出自己使用rollup实现的vue远程组件库。
vue远程组件库git地址

参考文献：

https://www.cnblogs.com/fe-linjin/p/11487935.html
https://juejin.cn/post/6844904058394771470
https://juejin.cn/post/6934698510436859912