在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