[指南] 用 Vue-SFC-Rollup 開發 Vue 2 版本套件

用 Rollup 來開發 Vue 套件是個可以有效減少檔案大小的一種方式。之前寫過 [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件 這篇,不過當時是撰寫 Vue 3 版本的。這篇改用 Vue 2 來寫個下拉選單,並筆記一下遇到的困難點。
vue.js logo vue


發佈前打包測試

可以先行使用 npm pack,得到打包後的檔案,並在另一個專案中進行測試。若你輸出的檔案路徑在 C:/Users/user/Desktop,那麼你的安裝路徑就是:npm i -D /c/users/user/desktop/<demo File>


 

心得

1. scope css / scss 會造成其他專案要修改樣式上的困難

因為 scope 會加上一串流水號於 html / css 上,而這流水號在與其他 Vue 專案合用時,是沒有辦法被專案增加到的。舉例來說:若你在套件壓縮發布時,加上了 data-xxaabb 。而其他專案在 scope 環境下,也會產生自己的 data-ccssdd。這樣一來,你的套件樣式就沒辦法被其他開發者輕易修改到。

2. sfc-Rollup 的基礎設定需要多點設定

如下範例,要加入 baseConfig.vue.css = false 和搭配 postCSSUrl 使用,才能正常使用 import scss 和輸出單一的 css 檔案。其中 url: ‘inline’ 是為了讓圖片可以變成 data:64 格式。


Github

Github:Vue-Multi-Select

按讚加入粉絲團

延伸閱讀