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

spivet · 2017-12-11T08:03:35Z

前端自动化构建工具，我们都经历了什么

在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，不过还没完成。后期也会一直跟着官网更新，有需要的可以关注一下。

The text was updated successfully, but these errors were encountered:

zhangzhibogithub · 2017-12-12T02:27:11Z

确实还没看就完了!

liutian · 2017-12-12T04:38:40Z

我也是个喜欢折腾的人从grunt到gulp再到webpack，也看了不少gulp和webpack的源码；最终我悟出来一个道理，前端打包编译这种操作终究会演变成傻瓜式的填空操作，注意我这里不是贬义。纵观其他语言java,android,ios,c#哪个没有打包编译过程，虽然和前端的打包编译可能有些不一样，但是终究都是：源码 --> 打包编译 --> 最终代码；前端打包编译最终肯定会演变成只需要理解内在原理不需要你动手写代码，想改变打包编译过程，改几个配置就行，甚至可以和IDE集成，变成可视化操作。说到最后还是angular-cli有远见，写angular项目你根本不需要写什么webpack，几个配置参数一改搞定。即使以后前端又出一个比webpack还要牛逼速度还要快的工具，对你的项目没有一点影响。angular-cli帮你搞定底层编译工具的切换工作，你只要稍微了解一下那些最新打包编译工具的原理就行，自己试着写一些demo就行，真正项目里面你不需要关系这些打包编译的细节。你只要告诉angular-cli你要发生产环境和是本地开发，你要压缩项目文件还是需要sourcemap，等等这些都变成了填空题。你要关心都就是怎么把你自己的代码写的更好，其他的事情交给angular，甚至angular有时会主动告诉你怎么写代码最好。写代码终究是体力活，能省力就省力，其他的都是浮云。虽然我是个爱折腾的人但是遇到真正的写项目，这个大道理还是要奉行的。哈哈

xyzshen · 2017-12-12T07:31:36Z

;

henyuan · 2017-12-12T09:48:53Z

如果用 vue 比较熟,又懒得配置的同学,可以试试 nuxt.js
虽然是 ssr 框架,但也支持 spa 模式,配置超简单.

vegawong · 2017-12-13T01:42:37Z

没有鸡汤，前端的姿态如此繁杂，零配置的口号终究只会是口号，如果为了零配置而不断集成，这东西就更没人用了，快？是因为还小而已

yiuyiu · 2017-12-13T06:06:19Z

因为表情包关注了博主，请以后多多使用 😝

spivet · 2017-12-14T02:41:32Z

@yiuyiu 一定让你满意😏

spivet · 2017-12-14T02:55:06Z

@vegawong 如果你说，因为小所以快，那么是有道理的。但如果说快，是因为小，这就有失偏颇了。
首先正如我在文中所说的，我们的项目真的需要那么繁重的配置？
压缩合并打包，代码分割提升加载速度，three shaking减少代码体积，页面自动刷新，除此之外，还有哪些东西是我们非要不可的？
另外parcel之所以快，还和它的机制有很大关系，利用多线程，并且可缓存，据说这些在下个版本的webpack中会出来。我对webpack不是很熟悉，但是如果你从vue-cli的1.X开始就在用，你就明白慢，不仅仅是因为大。

stoneyallen · 2017-12-14T03:00:09Z

@mcbai webpack的babel可以提供缓存的，再加上external功能的优化，在dev时速度也可以很快，而多线程方面有些插件也提供了这个功能，我相信parcel比其他快的一个主要因素就是小，至于零配置这倒是webpack需要调整的方向，现在的文档真是够乱，而且配置起来跟水平高低有很大关系

WxSwen · 2017-12-18T08:36:46Z

parcel实在是一言难尽，就目前而言，当你使用动态import时，路径是错误的，体现在图片上；build之后连js路径都找不到了；配置少意味着可定制度低，相比webpack，其实只要看下文档，基本上构建一个使用场景不会太难；parcel优势就在于门槛低，零配置，所谓的多线程处理，缓存，webpack也可以做到的

liumin1128 · 2017-12-20T02:32:32Z

与楼主经历相似，从远古时期的sublime livereload（可能是最早的热更新）=》grunt=》gulp=》webpack，其他的只是浅尝辄止。基本上我的前端之路，就是在整个前端自动化工程化的演变中走过来的。

Vincent2015 · 2017-12-20T07:01:12Z

@mcbai 跑了下，只有图片那个坑，其他的没有发现问题

spivet · 2017-12-20T09:47:32Z

@Vincent2015 你用的时候应该是新版本parcel，在我写这篇文章的时候问题是存在的，上周末我更新了parcel，其它问题都不存在了，但是css自动更新的问题还有，可能现在又更新了。
parcel最近更新挺频繁的，修复了不少问题，但同时也有一些新的问题，大家可以多踩踩，不行就提提issues

q27488 · 2017-12-21T08:45:22Z

感觉像是国外版的fis3，正如fis3团队所说：我们真的需要那么繁琐的配置吗？
最终使用与否，得看看明年parcel能升级成什么样了

zhaozhuoboy · 2017-12-22T06:19:17Z

我也觉得parcel简直非常爽了

blockmood · 2017-12-26T03:09:30Z

还有一个坑就是 background:url("") 里面必须带引号，否则资源也是找不到的。

Secretmm · 2018-01-03T03:31:33Z

被表情包笑出了声，哈哈哈哈哈哈

legold · 2018-01-22T09:41:43Z

写文章就好好写文章嘛！搞那么多表情害的我都想忍住不笑！

Halokitiboy · 2018-01-23T02:45:41Z

在你遇到坑中，现在除了图片换掉没有更新的情况，其他的都已经修复了！

lolisTop · 2018-01-26T08:52:14Z

问个问题输出的目录能像gulp一样配置？放在dist 的js/ css/ images/这样的目录？

LengOxO · 2018-01-27T04:45:23Z

大神们带带我前端，哈哈。我这个菜鸟模块都不会写。

ACCappuccino · 2018-02-02T02:22:37Z

哈哈，有趣的表情包。

Xiaolong145682 · 2018-02-23T03:19:11Z

犹豫，用还是不用！

vegawong · 2018-02-23T04:36:35Z

博主新年快乐，抱歉一直没时间回复！ parcel确实在某些场景有生存空间，只要他能继续小下去，不要像我之前说的，为了零配置的同时满足不断兼容前端发展的需求，就会不断集成变得越来越大，这样只会变得越来越难用。各位看官目前来说可以结合自己的项目需求选择，parcel能满足肯定是尽量使用parcel，毕竟简单粗暴而且快嘛！如果项目发展到一定复杂度的时候再转webpack也不是什么难事。

hugeorange · 2018-03-27T10:16:14Z

我在写demo的时候，碰到了一个问题，当我加上 .postcssrc 文件时

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

parcel index.html 之后，他会把 index.css 文件里的类名替换掉，如下

#_btnBox_gcj06_1 > button{
    border: 1px solid red;
}
._imgBox_gcj06_8 {
    position: relative;
    margin-top: 30px;
}

但是 index.html里的class，却还是原来的class，导致样式不生效了

 <div id="btnBox"></div>
    <div class="imgBox">
        <img src="/dist/42244a556a052d7121e6d02eafa3ed4a.png" alt="" class="hat">
        <img src="/dist/de87af629849c8cab5cb88b76453029d.png" alt="">
        <img src="/dist/c9da37d42ab415baf5ecda4275676607.png" alt="">
    </div>

不知道什么原因，请大佬赐教

w990752800 · 2018-04-02T06:50:19Z

我build之后，js,css 路径错误了，能不能配置的时候修改？
<link rel="stylesheet" href="/js.e6552a52.css"></head>
build 完后，前面加了/ 就报错了

解决了。。原来之前的html文件引用的时候没有加 ./ 加上之后就没事了

spivet · 2018-04-02T07:28:34Z

@hugeorange 太久没看github了，"modules": true,这个是使用cssmodule的配置，这个具体你看看cssmodule的文档吧，我配置的时候没遇到过类似的问题，忘了当时具体的配置了。
推荐你先看看postCSS和cssModule，你的CSS类名编译后被改变了，就是由于CssModule的原因

hongxb · 2018-04-18T06:26:20Z

给大佬递绿帽

jinmingpang · 2018-04-26T16:11:44Z

这边小项目试用了一下。小项目可以。大项目绝对蛋疼....好多都都是暗箱操作。遇到问题，全靠issue，文档及其简单，翻遍了找不到问题解决。急的要翻源码...希望官网将各种issue,和一下大型项目解决方案，都写成文档。这样才是王道....不然简直就是噱头，其实从star来看，目前一度飙升。其实更多是大家对他的支持，希望他越来愈好，就像webpack这样，一直干掉所有竞争对手，需要的是更加脚踏实地。前端项目构建工具更新，太快....grunt刚了解，又知道了gulp,这才刚刚用了一两个项目，又出来了，百度的fis3之类的，然后，大家都开始wb,正吐槽wb不同版本和配置很难理解的时候，来了一波parcel，这正是时候，特别是对于初学者，摈弃wb这一套，集中精力在自己学习的代码上，超快速介入新的项目。这正是wb给不了的。我对parcel的看法是，学习型和小型项目，我是用定了...大项目，不会去碰....一个坑就够我看好多文章和issue.这精力，我早就把wb弄好了，用户粑粑，禁不起来回折腾...

ppppppsmash · 2018-05-11T06:08:55Z

想请教大佬们，比如用parcel如何使用jQuery的插件,该如何设置

spivet · 2018-05-12T01:55:19Z

@peiliming 需要你的插件支持common.js规范才行，不支持就放在全局试试

jinmingpang · 2018-05-15T02:42:02Z

@peiliming 不要被这些工具吓到了，parcel无非就是引入文件而已。恰好，引入的文件，里面有一些导出的模块。例如传统 jq插件，或者其他JS插件没有，遵循commonjs,或者es6规范。那么你只需要去这个源文件里面改一下。在文件末尾，1. 赋值到window.xxx=Xxx. 2. 加一句 export 导出入口方法。但是这些方法是需要改一下源文件。再或者你自己发布一个线上npm包。或者倒入本地npm包。不过我觉得。直接拷贝这些插件JS，到自己lib目录下改一下就好了，最方便。

hotlt · 2019-05-09T23:25:44Z

跨域怎么解？

iwh718 · 2019-05-19T12:19:29Z

官方文档简单的不像样，说是配置好babel的文件，自动转换，结果没有。。。

spivet changed the title ~~打包工具parcel极简入门~~ 前端吐槽与parcel极简入门 Dec 11, 2017

spivet changed the title ~~前端吐槽与parcel极简入门~~ 前端构建吐槽与parcel极简入门 Dec 11, 2017

spivet changed the title ~~前端构建吐槽与parcel极简入门~~ 前端构建工具吐槽与parcel极简入门 Dec 11, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

spivet commented Dec 11, 2017 •

edited

Loading

zhangzhibogithub commented Dec 12, 2017

liutian commented Dec 12, 2017

xyzshen commented Dec 12, 2017 •

edited

Loading

henyuan commented Dec 12, 2017

vegawong commented Dec 13, 2017

yiuyiu commented Dec 13, 2017

spivet commented Dec 14, 2017

spivet commented Dec 14, 2017

stoneyallen commented Dec 14, 2017

WxSwen commented Dec 18, 2017 •

edited

Loading

liumin1128 commented Dec 20, 2017

Vincent2015 commented Dec 20, 2017

spivet commented Dec 20, 2017

q27488 commented Dec 21, 2017

zhaozhuoboy commented Dec 22, 2017

blockmood commented Dec 26, 2017

Secretmm commented Jan 3, 2018

legold commented Jan 22, 2018

Halokitiboy commented Jan 23, 2018

lolisTop commented Jan 26, 2018 •

edited

Loading

LengOxO commented Jan 27, 2018

ACCappuccino commented Feb 2, 2018

Xiaolong145682 commented Feb 23, 2018

vegawong commented Feb 23, 2018

hugeorange commented Mar 27, 2018

w990752800 commented Apr 2, 2018 •

edited

Loading

spivet commented Apr 2, 2018 •

edited

Loading

hongxb commented Apr 18, 2018

jinmingpang commented Apr 26, 2018 •

edited

Loading

ppppppsmash commented May 11, 2018

spivet commented May 12, 2018

jinmingpang commented May 15, 2018

hotlt commented May 9, 2019

iwh718 commented May 19, 2019

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

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

Comments

spivet commented Dec 11, 2017 • edited Loading

前端自动化构建工具，我们都经历了什么

来自parcel的拯救

好吧，这里才是正文

准备工作

示例的目录结构和代码

运行parcel

效果图

遇到的坑

修改html文件，页面不自动更新

修改css文件，页面不自动更新

更换图片，内容不更新

MOZ_TO_ME[node.type] is not a function

结语

zhangzhibogithub commented Dec 12, 2017

liutian commented Dec 12, 2017

xyzshen commented Dec 12, 2017 • edited Loading

henyuan commented Dec 12, 2017

vegawong commented Dec 13, 2017

yiuyiu commented Dec 13, 2017

spivet commented Dec 14, 2017

spivet commented Dec 14, 2017

stoneyallen commented Dec 14, 2017

WxSwen commented Dec 18, 2017 • edited Loading

liumin1128 commented Dec 20, 2017

Vincent2015 commented Dec 20, 2017

spivet commented Dec 20, 2017

q27488 commented Dec 21, 2017

zhaozhuoboy commented Dec 22, 2017

blockmood commented Dec 26, 2017

Secretmm commented Jan 3, 2018

legold commented Jan 22, 2018

Halokitiboy commented Jan 23, 2018

lolisTop commented Jan 26, 2018 • edited Loading

LengOxO commented Jan 27, 2018

ACCappuccino commented Feb 2, 2018

Xiaolong145682 commented Feb 23, 2018

vegawong commented Feb 23, 2018

hugeorange commented Mar 27, 2018

不知道什么原因，请大佬赐教

w990752800 commented Apr 2, 2018 • edited Loading

spivet commented Apr 2, 2018 • edited Loading

hongxb commented Apr 18, 2018

jinmingpang commented Apr 26, 2018 • edited Loading

ppppppsmash commented May 11, 2018

spivet commented May 12, 2018

jinmingpang commented May 15, 2018

hotlt commented May 9, 2019

iwh718 commented May 19, 2019

spivet commented Dec 11, 2017 •

edited

Loading

修改`html`文件，页面不自动更新

修改`css`文件，页面不自动更新

xyzshen commented Dec 12, 2017 •

edited

Loading

WxSwen commented Dec 18, 2017 •

edited

Loading

lolisTop commented Jan 26, 2018 •

edited

Loading

w990752800 commented Apr 2, 2018 •

edited

Loading

spivet commented Apr 2, 2018 •

edited

Loading

jinmingpang commented Apr 26, 2018 •

edited

Loading