前言

我是如何與Rollup相遇的：

項(xiàng)目中一直用的都是webpack，用的更多的是基于webpack包裝之后vue-cli。最近有一個(gè)需求就是加載遠(yuǎn)程組件，其實(shí)我的理解就是搞一個(gè)遠(yuǎn)程組件庫(kù)。就是一個(gè)類(lèi)庫(kù)，于是乎就發(fā)現(xiàn)其實(shí)vue等各種類(lèi)庫(kù)其實(shí)就是用rollup來(lái)打包的。于是就快速上手了rollup。

什么是Rollup？

總體來(lái)說(shuō)webpack和rollup在不同場(chǎng)景下，都能發(fā)揮自身優(yōu)勢(shì)作用。webpack對(duì)于代碼分割和靜態(tài)資源導(dǎo)入有著“先天優(yōu)勢(shì)”，并且支持熱模塊替換(HMR)，而rollup并不支持。
所以當(dāng)開(kāi)發(fā)應(yīng)用時(shí)可以?xún)?yōu)先選擇webpack，但是rollup對(duì)于代碼的Tree-shaking和ES6模塊有著算法優(yōu)勢(shì)上的支持，若你項(xiàng)目只需要打包出一個(gè)簡(jiǎn)單的bundle包，并是基于ES6模塊開(kāi)發(fā)的，可以考慮使用rollup。如果你是想打包vue3組件庫(kù)的話(huà)，這里我也會(huì)推薦vite 關(guān)于vite我們另外一篇文章再講。

快速上手

• 使用 npm install --global rollup 進(jìn)行安裝

• 安裝完后可以通過(guò)以下命令確認(rèn)是否安裝成功，若顯示版本號(hào)說(shuō)明可以正常使用Rollup了。
  rollup -version
  查看rollup相關(guān)參數(shù)，對(duì)照文檔 rollup 中文文檔地址
  rollup - h
  

  image.png

接下來(lái)貼出自己使用rollup實(shí)現(xiàn)的vue遠(yuǎn)程組件庫(kù)。
vue遠(yuǎn)程組件庫(kù)git地址

參考文獻(xiàn)：

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