在grunt+bower大行其道的时候，我还是一个刚进前端的fresh bird，记得那时刚在慕课网上看了一个grunt教学视频，还没来得及体验就发现大家已经开始用gulp了。
然后我屁颠屁颠的跑去找gulp的教程，跟着写了个demo。当我在命令行中敲下gulp的那一刻，我的内心是相当激动的。
这跟grunt比也太尼玛简单了！！
然鹅。。。好景并不长。。。
在使用gulp不到半年的时间，webpack横空出世，请原谅我直接忽略了Browserify，这玩意儿实在是有些丑陋，在webpack出来之前我一直用sea.js作为我的模块化工具。
不过在webpack1.x的版本中，我更多使用的是gulp-webpack，原因无他，webpack基于配置的格式让人看上去就像grunt一样让人不爽。
在webpack快升到2.X的时候，rollup带着three shaking来了，不过由于Vue的原因，对于rollup我只是浅尝辄止，不过这家伙的确比webpack简单不少。
在写Vue的时候一直使用vue-cli，有时候需要改改配置，所以不得不看看webpack2.X的文档，或许是受了rollup的刺激，webpack在我还没把2.X的文档看完的时候，3.X出来了。
那一刻，我的内心是奔溃的。。。
老子不看了！！！
就这样，传统的如 .jsp 那样的页面，我依旧使用gulp，而SPA模式的页面，当然是厚颜无耻的用着vue-cli，不对开源界做出一点贡献。
最后差点漏掉了一个家伙——FIS，现在最新的版本是FIS3，不过我记得2015年就已经是FIS3了。。。
FIS也是一个大而全的构建工具，当初学gulp的时候简单体验了一下，感觉说不上来，或许是我那时的能力还不足以驾驭它，反正配置起来也挺麻烦，基本上也就百度自家用，所以不多说了。
来自parcel的拯救
我自认为也算是一个相当能，并且愿意折腾的人了，但也着实被这些层出不穷的轮子搞得有点受不了。甚至有那么一瞬间，我感觉自己的铁杵都要被磨成针了。。。
对于Vue而言，有vue-cli这个强大而又方便的脚手架，然后多页面下，gulp却已经无法满足欲望日渐强盛的我了。
不过我一直相信一句话，车到山前必有路，船到桥头自然直。终于就在昨天，2017年12月10日下午12点的样子，我发现了一篇由奇舞团某美媛（其实我并不认识）写的文章一个比webpack快10倍的打包工具（订阅号上的，没找到文章地址）。
对于新东西，我一向是很乐意去尝试的，虽然可能更多的也仅仅是停留在尝试的阶段，就像rollup和react这些东西一样，当然他们两个都不新了。
此媛的文章写的有点长，不过我还是耐心看完了，但是我一直看到结尾后都没明白这个东西怎么用。。。
WTF！！！！
写这么多，连个demo都不给个！！
于是我开始百度，发现百度没有parcel这个东西（不过今天能搜到几篇文章了），上掘金一看，发现这果然是个新家伙，接着去github找到了官网。
把官网的文档看完后，我的内心是有些凌乱的。。。
这家伙到底怎么用？？
然后我再次回到了Getting Started，小心翼翼的敲下那不足10行的代码，然后按下回车不到1秒的时间。
卧槽！！！ It just work！！！
这尼玛，果然是零配置！！果然是快又小！！
抑制住内心的激动，我又着手开始写一个正经点的demo，既然是模块打包工具，肯定得有模块才行嘛。
好吧，这里才是正文
准备工作
安装parcel，
yarn global add parcel-bundler
创建一个 package.json 文件，
yarn init -y
示例的目录结构和代码
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<p id="txt">点击给大佬戴帽：</p>
<div id="btnBox"></div>
<div class="imgBox">
<img class="hat" src="./img/hat.png" alt="">
<img src="./img/capping.jpg" alt="">
</div>
<script src="./js/index.js"></script>
</body>
</html>
/* index.css */
.imgBox {
position: relative;
}
.hat {
background-color: #fff;
position: absolute;
top: 126px;
left: 310px;
width: 143px;
transform: rotate(-6deg);
}
// index.js
const setButton = require('./setButton').setButton;
const setColor = require('./setColor').setColor;
const btnsTxt = ['原谅的颜色', '寂寞的颜色', '花儿的颜色'];
document.getElementById('btnBox').innerHTML = setButton(btnsTxt);
const btns = document.getElementsByClassName('btn');
for(let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
const color = setColor(this.textContent)
document.getElementsByClassName('hat')[0].style.backgroundColor = color
document.getElementById('txt').style.color = color
}
}
// setButton.js
function setButton(arr) {
let btnHtml = '';
for(let i of arr) {
btnHtml += `
<button class="btn" type="button">${i}</button>
`
}
return btnHtml;
}
module.exports = {
setButton: setButton
}
//setColor.js
function setColor(tip) {
let color;
switch (tip) {
case '原谅的颜色':
color = '#00db00'
break;
case '寂寞的颜色':
color = '#ffff37'
break;
case '花儿的颜色':
color = '#f75000'
break;
default:
color = '#000'
break;
}
return color;
}
module.exports = {
setColor: setColor
}
运行parcel
命令行中输入，
parcel index.html
效果图
完美运行！！
遇到的坑
一个新的东西出来，不管它有多好，也会存在很多坑的，虽然这个demo很简单，但是也遇到了几个问题，这里简单列举一下：
修改html文件，页面不自动更新
这个不是什么bug，官网很明确的写了，热更新只针对css和JavaScript，但是在实际开发过程中，对于html文件的监听也是必须的。
修改css文件，页面不自动更新
这个就是个问题了，在一个比webpack快10倍的打包工具这篇文章里也有提到，需要使用PostCSS，这个得后面试试。
更换图片，内容不更新
换图片不换图片名字的情况下，手动刷新页面，页面中的图片也不会更换
MOZ_TO_ME[node.type] is not a function
就上面的实例代码，执行parcel index.html不会有任何问题，但如果直接parcel build index.html就会报错：
在issues中找到个一样的问题UnhandledPromiseRejectionWarning when building。
在回答里说跟Windows有关，不过我试了下，并不是Windows的问题，然后照着他的答案，加了后缀parcel build index.html --no-minify。
加完就好用了，所以应该是uglify-js的原因，上网搜了下，uglify-js的确不支持直接压缩包含ES6语法的代码。然后我又安装了babel-preset-env，发现并没有像文档里说的那样直接就能编译，不知道是哪里有问题，只能后面再试试，先把手里的工作完成。
结语
总体而言，对于parcel的初步尝试还是很满意的，就现在看来，如果就是单纯的压缩打包，并且JavaScript用的是ES6以下的语法，的确能做到零配置。后面还得加上PostCss和Babel再看看，但是按照官网的介绍也都很简单，全都集成好的，只是用法上还需要看看。
在掘金上看到有朋友说使用parcel打包后的体积比webpack大，这个没有测试过，但是我们的项目多是PC端的，也不是很大，所以哪怕差个几十KB都不是什么问题，但是速度真的是超级快啊！
另外文档也是简单的不要不要的，以至于连个完整的demo都没有，这周我会做个简单但是尽量详细的demo出来，方便跟大家交流学习。
另外对于阅读英文文档有困难的朋友，我这里把文档翻译了一份parcel-doc，不过还没完成。后期也会一直跟着官网更新，有需要的可以关注一下。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。
自从2016年双十一正式上线，Fundebug累计处理了5亿+错误事件，得到了众多知名用户的认可。
原文地址：https://github.com/Mcbai/Blog/issues/2