[重构倒数第16天] - 选择套件给我好好选啊!

前言

该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系列文章，在这边整理了许多我自己使用Vue重构很多网站的经验分享给读者们。

我们都会因为方便所以来选择好用的套件来辅助我们网站的开发，但是很常会看到其他人选择套件的标准是除了可以达到目的以外，其他的考量都没有就给他使用下去了，但是往往很多东西都是不必要的，甚至是会给未来的自己找很多麻烦，今天我就来谈一下我在重构专案上面，看过人家使用最多不必要的套件以及我是如何去评估这个套件适不适合使用。

在网路上面会有许多人写了不少跟套件，这些套件通常可以分两大类，工具类 or 功能类，举例 Lodash 来说好了，这就是一个工具类的套件，那像是 Swiper.js 就是功能类的套件。

考量一：会选择跟框架耦合性低的套件

如标题，选择套件的时候其实我很讨厌一些工具类的套件一直跟框架绑再一起，没有必要阿，列出几个我的考量点 :

1. 因为它既然是工具类的套件，那自然就已经设计过它的使用方式，没有必要再跟框架绑一层，然後在想新的使用方式 。
2. 把工具类套件跟框架整合，会有版本上面的问题，假如今天的专案是vue2，如果专案要升级vue3的话，那你使用的套件的整合的vue版本比较低，那不就使用这个套件的地方就要全部改掉，或是等这个套件的作者升级成Vue3，所以会有版本迁移的问题。
3. 如果是工具类套件跟框架整合的套件，当今天发生错误的时候，你要排查到底是原来的工具类套件的问题，还是重新包装过後的套件的问题，会变成很难去排查状况。

常常看到的套件有几个是我觉得没有甚麽必要使用的，像是 vue-axios 、vue-cookies、vue-awesome-swiper、BootstrapVue等等，还有很多这类型的套件其实就有原本的可以使用，根本没有必要再去使用别人另外包装过的。

考量二：不要用依赖性高的套件

什麽是依赖性高的套件 ? 所谓的依赖性高的套件就是像我上面提到的 vue-axios 、vue-cookies、这类型的套件就是二度封装依赖性高，他同时会需要你载入原本的 axios 还有 vue-axios，你都已经载入了 axios，何必在载入一个...，所以例如我今天要做一个轮播效果，我就会选择用纯 swiper.js ，或是我今天要做一个拖曳排序的效果，我就会选择用 Vue 来开发，没有去过度依赖其他套件的 Vue.Draggable 这个套件，而且这个套件还有同时支援 Vue2 跟 Vue3 的版本，这是在选用套件上面最理想的一种。

现在 swiper.js 官方自己有出了vue的版本( 以前没有 )，所以以前用 vue-awesome-swiper 的人现在统一的话，就还是要改回官方原版的，又多了一层麻烦。

你会发现我选择套件的这个逻辑，就是我会尽量选择不要过度依赖其他套件的套件，这样才可以在问题发生的时候更好找到源头，就有点像是以前很多套件都依赖Jquery，但是今天重构的时候要去除 jquery 化，那这套件不就要拔掉重新找了吗...

所以套件的选用最好找纯 js 开发的，或是单纯用 Vue 开发且没有过度依赖其他套件的，才是降低专案的维护成本的好选择。

考量三：找客制化程度高的套件

我们开发网站的时候常常会需要让 UI 符合设计稿的样子，但是往往我们找到的套件本身就会自带许多基本的样式，无法符合我们自己的网站设计，所以这时候要去修改套件的样式，但是有些套件设计的方式会很难去修改style，例如说样式的改变或是hover的效果是用 js 去改变的，那这样你自己去写 css 覆盖就没有用了，又或是你找的套件它在修改样式的方式上面过於复杂，可能会导致未来接手的人不知道其中前因後果，而造成後续维护上的困难，这都是很常会发生的事情，所以我在找套件的时候都会特别地去注意几个点 :

1. CSS 样式好不好去复写或是修改。
2. 有没有符合我最基本的功能上需求，如果有缺一些功能的话，我自己去改它的套件好不好去扩充。
3. 有没有提供好的生命周期接口，可以去应付执行阶段遇到的需求问题。

这几点是我再找套件的时候常常会去看的点，因为很多人找到了套件就直接用，结果发生了功能上面的不足或是样式上面无法修改，就直接放烂不管，倒置专案上线的时候再找人求救，这时候逻辑已经包覆的很深了，要改也会没有这麽容易，所以我会建议一开始的时候就先仔细的思考几个点，再来决定要不要用这个套件。

考量四：这个功能或是 UI 有需要用套件吗 ?

有的时候页面上面有一些功能其实是不需要使用套件的，我就不知道很多人都喜欢连简单的功能都不愿意自己写，宁愿去找人家包好然後不好处理的套件，也不愿意花个 1~ 2小时自己写一个简单然後没有其他多余功能自己包的套件，自己写的可控性还是比较好的，除非自己写需要花上过多的时间成本。

那你可能会说假设一个功能要写 1 小时，但是我用套件只要 10 分钟，当然是越快越好啊，但是如果你今天是做产品或是服务的话，那你现在省下来的时间未来就会转嫁到你的维护成本上面，只是很多人都没有办法意识到这点。

考量五：难道真的不要需要用套件吗 ?

唉! 不是，我不是说不能用套件阿，而是考量到开发的时间成本，还有专案的维护性，以下我列几个一定要使用套件的理由：

1. 开发时间太短，用套件可以节省时间。
2. 专案淘汰率高，用套件可以更快速完成收钱。
3. 套件本身是由开发团队在维护更新，也解决了许多的 bug 问题，这种类型的套件自然有者更高的稳定性，所以会比自己写的来的好用且更全面。
4. 有众多的使用者在使用，所以遇到问题的时候也比较好去找到别人使用的经验，还有自己没想过的解决方案。
5. 比起自己自干自秀，只要能掌握且更清楚的知道这个套件的原理，用套件其实没有什麽问题，就怕是用了然後也不知道它在干嘛。

有关於套件的介绍我这边之前有写一篇文章来介绍开发上面常用的套件，有兴趣的朋友可以看看 ( 传送门 )

其实套件的选用的确一直被大家所拿出来讨论，但是其实最重要的是要看合不合适，没有一定的不行，就我来说我也爱用套件，不喜欢重复造轮子，如果人家的套件是有长时间再维护而且有广大使用者在使用，没理由你自己写的会比它好吧，所以该用套件的时候我还是会用，好啦~以上就是我在选择套件上面的思考逻辑，我们明天见啦~

那如果对於Vue3不够熟的话呢?

Ps. 购买的时候请登入或注册该平台的会员，然後再使用下面连结进入网站点击「立即购课」，这样才可以让我获得更多的课程分润，还可以帮助我完成更多丰富的内容给各位。

我有开设了一堂专门针对Vue3从零开始教学的课程，如果你觉得不错的话，可以购买我课程来学习
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果对於JS基础不熟的朋友，我也有开设JS的入门课程，可以参考这个课程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

订阅Mike的频道享受精彩的教学与分享

Mike 的 Youtube 频道
Mike的medium
MIke 的官方 line 帐号，好友搜寻 @mike_cheng