前端的打包工具

还记得以前用webpack3的时候,各种莫名其妙的插件,还特别难配置,不知道是不是我的学习姿势不对,后来我转用了parcel,那时候到现在我的项目打包都是用parcel,包括我的个人项目pencil-vue也是用parcel打包的,当然会有些许缺点,后面再说。

parcel

parcel的卖点就是零配置,相信被webpack折腾过的同学都会体会到parcek的好。当初只看了parcel的入门文档就直接进入项目了,parcel index.html下面说下parcel的缺点,但是parcel零配置这个优点足以让我忍受这些缺点

  • 在大项目中打包时间比较慢,各大打包工具都吹嘘1秒打包,但是实际开发中大项目都要比较久的时间,当然不会超过一分钟,打包时间在10秒内是我能接受的范围(不包括清除缓存后打包)
  • 如果在开发npm模块的时候,npm link xxx的项目需要手动清除缓存再打包,因为打包的时候会残留之前的缓存文件,也就是你更新后会残留旧版本的部分代码,这里需要手动清除缓存,也可以使用打包清除缓存的参数。
  • 如果你打包使用parcel index而你文件夹刚好同时存在index.html和index.js则默认会打包index.js,这里算是一个新人的小坑,官网的打包例子都是没有后戳的,建议以后打包都带后戳parcel index.html

webpack的价值

我在群里看到一句话当前端忘记webpack的存在的时候,webpack就成功了,我在想目前不就是这个情况吗,开发中我们使用的是vue,angular框架自带的打包工具,但是这些框架的打包底层就是用webpack的,也就是说框架自己帮你配置好了,甚至你需要配置的话也要通过框架给你提供最简单的配置,甚至忘记了webpack的存在。也就是日常开发中如果使用jQuery+Bootstrap我会用parcel打包,如果Vue+Vue周边我会用vue自带的webpack打包。