前端又双叒叕一个打包工具——parceljs

前端你懂的， 隔断时间不造个轮子会死人。

为了解决什么问题

同样webpack一样，parcel官网首页的一句话基本就说清楚了为什么要用它

Blazing fast, zero configuration web application bundler

快速和零配置的打包工具基本说清了问题。我尝试了一下，因为是demo不知道实际开发纠结快多少，但还有一个让我觉得的亮点，就是在webpack开发的时候，有个变扭的地方就是入口文件是一个js，而以js为中心，打包好一切资源后，再插入到html文件中。而parcel却是可以以html为入口，对前端来说也应该更直观一点，因为前端最终是要以游览器为运行环境的。

至于0配置，我觉得有些过了，只加入了一些常用的前端打包需求，但离开箱即用有很大差距，比如现在前端几乎离不开的babel，还有postcss还是需要自己配置一下。要开发vue，react也需要相应的插件支持。

实践

官网上的例子我就不抄了，总之和最开始的前端开发一样，新建html，写script标签，而在js中可以任意使用import模块语法。
如果你碰到如下报错:

error

那是因为你node版本不够,必须要node>=8以上。
升级版本即可。

下面编译一个vue的实例，用到我同事开发的一个parcel插件,parcel的插件不用配置，只需要安装在package.json里面，parcel会自己打包，所以安装好这个插件就可以开写了

npm i parcel-plugin-vue --save    

比较烦的一点是在vue的入口文件js里面要用到template，需要引用vue.esm.js，一般webpack是放在alias的，但parcel没有，很尴尬，所以app.js如下引用:

import Vue from 'vue/dist/vue.esm.js';

具体demo实例代码在github。这个工具还在不断探索中，如果遇到坑会不定期更新这个文章。