[指南] 用 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

按赞加入粉丝团

延伸阅读