前端构建工具吐槽与parcel极简入门

r囧r小猫 2022-05-20 01:38 131阅读 0赞

在grunt+bower大行其道的时候，我还是一个刚进前端的fresh bird，记得那时刚在慕课网上看了一个grunt教学视频，还没来得及体验就发现大家已经开始用gulp了。

然后我屁颠屁颠的跑去找gulp的教程，跟着写了个demo。当我在命令行中敲下`gulp`的那一刻，我的内心是相当激动的。

[![image][]][image]

这跟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出来了。

那一刻，我的内心是奔溃的。。。

[![image][image 1]][image 1]

老子不看了！！！

就这样，传统的如 `.jsp` 那样的页面，我依旧使用gulp，而SPA模式的页面，当然是厚颜无耻的用着vue-cli，不对开源界做出一点贡献。

最后差点漏掉了一个家伙——FIS，现在最新的版本是FIS3，不过我记得2015年就已经是FIS3了。。。

FIS也是一个大而全的构建工具，当初学gulp的时候简单体验了一下，感觉说不上来，或许是我那时的能力还不足以驾驭它，反正配置起来也挺麻烦，基本上也就百度自家用，所以不多说了。

# 来自parcel的拯救 #

我自认为也算是一个相当能，并且愿意折腾的人了，但也着实被这些层出不穷的轮子搞得有点受不了。甚至有那么一瞬间，我感觉自己的铁杵都要被磨成针了。。。

[![image][image 2]][image 2]

对于Vue而言，有vue-cli这个强大而又方便的脚手架，然后多页面下，gulp却已经无法满足欲望日渐强盛的我了。

[![image][image 3]][image 3]

不过我一直相信一句话，`车到山前必有路，船到桥头自然直`。终于就在昨天，2017年12月10日下午12点的样子，我发现了一篇由奇舞团某美媛（其实我并不认识）写的文章`一个比webpack快10倍的打包工具`（订阅号上的，没找到文章地址）。

对于新东西，我一向是很乐意去尝试的，虽然可能更多的也仅仅是停留在尝试的阶段，就像rollup和react这些东西一样，当然他们两个都不新了。

此媛的文章写的有点长，不过我还是耐心看完了，但是我一直看到结尾后都没明白这个东西怎么用。。。

WTF！！！！

写这么多，连个demo都不给个！！

于是我开始百度，发现百度没有`parcel`这个东西（不过今天能搜到几篇文章了），上掘金一看，发现这果然是个新家伙，接着去github找到了官网。

把官网的文档看完后，我的内心是有些凌乱的。。。

[![image][image 4]][image 4]

这家伙到底怎么用？？

然后我再次回到了Getting Started，小心翼翼的敲下那不足10行的代码，然后按下回车不到1秒的时间。

卧槽！！！ It just work！！！

这尼玛，果然是零配置！！果然是快又小！！

抑制住内心的激动，我又着手开始写一个正经点的demo，既然是模块打包工具，肯定得有模块才行嘛。

# 好吧，这里才是正文 #

### 准备工作 ###

> 安装parcel，`yarn global add parcel-bundler`

> 创建一个 package.json 文件，`yarn init -y`

### 示例的目录结构和代码 ###

[![image][image 5]][image 5]

<!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`

[![image][image 6]][image 6]

### 效果图 ###

[![image][image 7]][image 7]

完美运行！！

# 遇到的坑 #

一个新的东西出来，不管它有多好，也会存在很多坑的，虽然这个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`就会报错：  
[![err][]][err]

在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

[image]: /images/20220520/e15e14c02e7f472e91f5d5d57e8a2fd8.png
[image 1]: /images/20220520/7de18e47a7174148a1a8f58a361a3a03.png
[image 2]: /images/20220520/3847eebf912d4cba93854674999fcf23.png
[image 3]: /images/20220520/1be70e832a5e499284cd2862f7dad546.png
[image 4]: /images/20220520/7fc38328c4eb411d99fb92bb2845cdfe.png
[image 5]: /images/20220520/72c26023174c43fca243dfa7e74440db.png
[image 6]: /images/20220520/edcde5c238a44c02b8ce2e5cb15b4066.png
[image 7]: /images/20220520/7f2579f704da464291bd0e9d7e163d8d.png
[err]: /images/20220520/7889b904d68749dd93b18070e042b5f4.png
[UnhandledPromiseRejectionWarning when building]: https://github.com/parcel-bundler/parcel/issues/11#issuecomment-349491572
[parcel-doc]: https://github.com/Mcbai/parcel-doc
[Fundebug]: https://www.fundebug.com/