{"action":"created","issue":{"url":"https://api.github.com/repos/Mcbai/Blog/issues/2","repository_url":"https://api.github.com/repos/Mcbai/Blog","labels_url":"https://api.github.com/repos/Mcbai/Blog/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/Mcbai/Blog/issues/2/comments","events_url":"https://api.github.com/repos/Mcbai/Blog/issues/2/events","html_url":"https://github.com/Mcbai/Blog/issues/2","id":280925932,"number":2,"title":"前端构建工具吐槽与parcel极简入门","user":{"login":"Mcbai","id":12459860,"avatar_url":"https://avatars2.githubusercontent.com/u/12459860?v=4","gravatar_id":"","url":"https://api.github.com/users/Mcbai","html_url":"https://github.com/Mcbai","followers_url":"https://api.github.com/users/Mcbai/followers","following_url":"https://api.github.com/users/Mcbai/following{/other_user}","gists_url":"https://api.github.com/users/Mcbai/gists{/gist_id}","starred_url":"https://api.github.com/users/Mcbai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mcbai/subscriptions","organizations_url":"https://api.github.com/users/Mcbai/orgs","repos_url":"https://api.github.com/users/Mcbai/repos","events_url":"https://api.github.com/users/Mcbai/events{/privacy}","received_events_url":"https://api.github.com/users/Mcbai/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":22,"created_at":"2017-12-11T08:03:35Z","updated_at":"2018-02-23T03:19:11Z","closed_at":null,"author_association":"OWNER","body":"# 前端自动化构建工具，我们都经历了什么\r\n\r\n在grunt+bower大行其道的时候，我还是一个刚进前端的fresh bird，记得那时刚在慕课网上看了一个grunt教学视频，还没来得及体验就发现大家已经开始用gulp了。\r\n\r\n然后我屁颠屁颠的跑去找gulp的教程，跟着写了个demo。当我在命令行中敲下`gulp`的那一刻，我的内心是相当激动的。\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33815198-9ff63fac-de6a-11e7-9909-66b23e4e8947.png)\r\n\r\n这跟grunt比也太尼玛简单了！！\r\n\r\n然鹅。。。好景并不长。。。\r\n\r\n在使用gulp不到半年的时间，webpack横空出世，请原谅我直接忽略了Browserify，这玩意儿实在是有些丑陋，在webpack出来之前我一直用sea.js作为我的模块化工具。\r\n\r\n不过在webpack1.x的版本中，我更多使用的是gulp-webpack，原因无他，webpack基于配置的格式让人看上去就像grunt一样让人不爽。\r\n\r\n在webpack快升到2.X的时候，rollup带着three shaking来了，不过由于Vue的原因，对于rollup我只是浅尝辄止，不过这家伙的确比webpack简单不少。\r\n\r\n在写Vue的时候一直使用vue-cli，有时候需要改改配置，所以不得不看看webpack2.X的文档，或许是受了rollup的刺激，webpack在我还没把2.X的文档看完的时候，3.X出来了。\r\n\r\n那一刻，我的内心是奔溃的。。。\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33816161-16afd994-de72-11e7-8148-1271adef4209.png)\r\n\r\n老子不看了！！！\r\n\r\n就这样，传统的如 `.jsp` 那样的页面，我依旧使用gulp，而SPA模式的页面，当然是厚颜无耻的用着vue-cli，不对开源界做出一点贡献。\r\n\r\n最后差点漏掉了一个家伙——FIS，现在最新的版本是FIS3，不过我记得2015年就已经是FIS3了。。。\r\n\r\nFIS也是一个大而全的构建工具，当初学gulp的时候简单体验了一下，感觉说不上来，或许是我那时的能力还不足以驾驭它，反正配置起来也挺麻烦，基本上也就百度自家用，所以不多说了。\r\n\r\n# 来自parcel的拯救\r\n\r\n我自认为也算是一个相当能，并且愿意折腾的人了，但也着实被这些层出不穷的轮子搞得有点受不了。甚至有那么一瞬间，我感觉自己的铁杵都要被磨成针了。。。\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33816447-ee9d1938-de73-11e7-8dc8-54019028c847.png)\r\n\r\n对于Vue而言，有vue-cli这个强大而又方便的脚手架，然后多页面下，gulp却已经无法满足欲望日渐强盛的我了。\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33816643-503a13e8-de75-11e7-990e-24903c67ec5d.png)\r\n\r\n不过我一直相信一句话，`车到山前必有路，船到桥头自然直`。终于就在昨天，2017年12月10日下午12点的样子，我发现了一篇由奇舞团某美媛（其实我并不认识）写的文章`一个比webpack快10倍的打包工具`（订阅号上的，没找到文章地址）。\r\n\r\n对于新东西，我一向是很乐意去尝试的，虽然可能更多的也仅仅是停留在尝试的阶段，就像rollup和react这些东西一样，当然他们两个都不新了。\r\n\r\n此媛的文章写的有点长，不过我还是耐心看完了，但是我一直看到结尾后都没明白这个东西怎么用。。。\r\n\r\nWTF！！！！\r\n\r\n写这么多，连个demo都不给个！！\r\n\r\n于是我开始百度，发现百度没有`parcel`这个东西（不过今天能搜到几篇文章了），上掘金一看，发现这果然是个新家伙，接着去github找到了官网。\r\n\r\n把官网的文档看完后，我的内心是有些凌乱的。。。\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33816921-6fba7530-de77-11e7-8269-fbc6b9fe3e5f.png)\r\n\r\n这家伙到底怎么用？？\r\n\r\n然后我再次回到了Getting Started，小心翼翼的敲下那不足10行的代码，然后按下回车不到1秒的时间。\r\n\r\n卧槽！！！ It just work！！！\r\n\r\n这尼玛，果然是零配置！！果然是快又小！！\r\n\r\n抑制住内心的激动，我又着手开始写一个正经点的demo，既然是模块打包工具，肯定得有模块才行嘛。\r\n\r\n# 好吧，这里才是正文\r\n\r\n### 准备工作\r\n\r\n> 安装parcel，`yarn global add parcel-bundler`\r\n\r\n> 创建一个 package.json 文件，`yarn init -y`\r\n\r\n### 示例的目录结构和代码\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33817343-159598e8-de7a-11e7-8613-975932c27625.png)\r\n\r\n```html\r\n<!-- index.html -->\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>test</title>\r\n\t<link rel=\"stylesheet\" href=\"./css/index.css\">\r\n</head>\r\n<body>\r\n\t<p id=\"txt\">点击给大佬戴帽：</p>\r\n\t<div id=\"btnBox\"></div>\r\n\t<div class=\"imgBox\">\r\n\t\t<img class=\"hat\" src=\"./img/hat.png\" alt=\"\">\r\n\t\t<img src=\"./img/capping.jpg\" alt=\"\">\r\n\t</div>\r\n\r\n\t<script src=\"./js/index.js\"></script>\r\n</body>\r\n</html>\r\n```\r\n\r\n```css\r\n/* index.css */\r\n\r\n.imgBox {\r\n\tposition: relative;\r\n}\r\n.hat {\r\n\tbackground-color: #fff;\r\n    position: absolute;\r\n    top: 126px;\r\n    left: 310px;\r\n    width: 143px;\r\n    transform: rotate(-6deg);\r\n}\r\n```\r\n\r\n```JavaScript\r\n// index.js\r\n\r\nconst setButton = require('./setButton').setButton;\r\nconst setColor = require('./setColor').setColor;\r\n\r\nconst btnsTxt = ['原谅的颜色', '寂寞的颜色', '花儿的颜色'];\r\ndocument.getElementById('btnBox').innerHTML = setButton(btnsTxt);\r\n\r\nconst btns = document.getElementsByClassName('btn');\r\nfor(let i = 0; i < btns.length; i++) {\r\n\tbtns[i].onclick = function () {\r\n\t\tconst color = setColor(this.textContent)\r\n\t\tdocument.getElementsByClassName('hat')[0].style.backgroundColor = color\r\n\t\tdocument.getElementById('txt').style.color = color\r\n\t}\r\n}\r\n\r\n```\r\n\r\n```JavaScript\r\n// setButton.js\r\n\r\nfunction setButton(arr) {\r\n\tlet btnHtml = '';\r\n\tfor(let i of arr) {\r\n\t\tbtnHtml += `\r\n\t\t\t<button class=\"btn\" type=\"button\">${i}</button>\r\n\t\t`\r\n\t}\r\n\treturn btnHtml;\r\n}\r\n\r\nmodule.exports = {\r\n\tsetButton: setButton\r\n}\r\n```\r\n\r\n```JavaScript\r\n//setColor.js\r\n\r\nfunction setColor(tip) {\r\n\tlet color;\r\n\tswitch (tip) {\r\n\t\tcase '原谅的颜色':\r\n\t\t\tcolor = '#00db00'\r\n\t\t\tbreak;\r\n\t\tcase '寂寞的颜色':\r\n\t\t\tcolor = '#ffff37'\r\n\t\t\tbreak;\r\n\t\tcase '花儿的颜色':\r\n\t\t\tcolor = '#f75000'\r\n\t\t\tbreak;\r\n\t\tdefault:\r\n\t\t\tcolor = '#000'\r\n\t\t\tbreak;\r\n\t}\r\n\treturn color;\r\n}\r\n\r\nmodule.exports = {\r\n\tsetColor: setColor\r\n}\r\n```\r\n\r\n### 运行parcel\r\n\r\n> 命令行中输入，`parcel index.html`\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33817572-30a8ce24-de7b-11e7-9cf9-2520f319bcb6.png)\r\n\r\n### 效果图\r\n\r\n![image](https://user-images.githubusercontent.com/12459860/33817579-3a59a4a2-de7b-11e7-9192-652a00204195.png)\r\n\r\n完美运行！！\r\n\r\n# 遇到的坑\r\n\r\n一个新的东西出来，不管它有多好，也会存在很多坑的，虽然这个demo很简单，但是也遇到了几个问题，这里简单列举一下：\r\n\r\n### 修改`html`文件，页面不自动更新\r\n\r\n这个不是什么bug，官网很明确的写了，热更新只针对`css`和`JavaScript`，但是在实际开发过程中，对于`html`文件的监听也是必须的。\r\n\r\n### 修改`css`文件，页面不自动更新\r\n\r\n这个就是个问题了，在`一个比webpack快10倍的打包工具`这篇文章里也有提到，需要使用PostCSS，这个得后面试试。\r\n\r\n### 更换图片，内容不更新\r\n\r\n换图片不换图片名字的情况下，手动刷新页面，页面中的图片也不会更换\r\n\r\n### MOZ_TO_ME[node.type] is not a function\r\n\r\n就上面的实例代码，执行`parcel index.html`不会有任何问题，但如果直接`parcel build index.html`就会报错：\r\n![err](https://user-images.githubusercontent.com/12459860/33819967-027c6292-de88-11e7-9fb2-6bdf84791bd2.png)\r\n\r\n在issues中找到个一样的问题[UnhandledPromiseRejectionWarning when building](https://github.com/parcel-bundler/parcel/issues/11#issuecomment-349491572)。\r\n\r\n在回答里说跟Windows有关，不过我试了下，并不是Windows的问题，然后照着他的答案，加了后缀`parcel build index.html --no-minify`。\r\n\r\n加完就好用了，所以应该是`uglify-js`的原因，上网搜了下，`uglify-js`的确不支持直接压缩包含ES6语法的代码。然后我又安装了`babel-preset-env`，发现并没有像文档里说的那样直接就能编译，不知道是哪里有问题，只能后面再试试，先把手里的工作完成。\r\n\r\n# 结语\r\n\r\n总体而言，对于parcel的初步尝试还是很满意的，就现在看来，如果就是单纯的压缩打包，并且JavaScript用的是ES6以下的语法，的确能做到零配置。后面还得加上PostCss和Babel再看看，但是按照官网的介绍也都很简单，全都集成好的，只是用法上还需要看看。\r\n\r\n在掘金上看到有朋友说使用parcel打包后的体积比webpack大，这个没有测试过，但是我们的项目多是PC端的，也不是很大，所以哪怕差个几十KB都不是什么问题，但是速度真的是超级快啊！\r\n\r\n另外文档也是简单的不要不要的，以至于连个完整的demo都没有，这周我会做个简单但是尽量详细的demo出来，方便跟大家交流学习。\r\n\r\n另外对于阅读英文文档有困难的朋友，我这里把文档翻译了一份[parcel-doc](https://github.com/Mcbai/parcel-doc)，不过还没完成。后期也会一直跟着官网更新，有需要的可以关注一下。"},"comment":{"url":"https://api.github.com/repos/Mcbai/Blog/issues/comments/367898097","html_url":"https://github.com/Mcbai/Blog/issues/2#issuecomment-367898097","issue_url":"https://api.github.com/repos/Mcbai/Blog/issues/2","id":367898097,"user":{"login":"Xiaolong145682","id":26953818,"avatar_url":"https://avatars1.githubusercontent.com/u/26953818?v=4","gravatar_id":"","url":"https://api.github.com/users/Xiaolong145682","html_url":"https://github.com/Xiaolong145682","followers_url":"https://api.github.com/users/Xiaolong145682/followers","following_url":"https://api.github.com/users/Xiaolong145682/following{/other_user}","gists_url":"https://api.github.com/users/Xiaolong145682/gists{/gist_id}","starred_url":"https://api.github.com/users/Xiaolong145682/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Xiaolong145682/subscriptions","organizations_url":"https://api.github.com/users/Xiaolong145682/orgs","repos_url":"https://api.github.com/users/Xiaolong145682/repos","events_url":"https://api.github.com/users/Xiaolong145682/events{/privacy}","received_events_url":"https://api.github.com/users/Xiaolong145682/received_events","type":"User","site_admin":false},"created_at":"2018-02-23T03:19:11Z","updated_at":"2018-02-23T03:19:11Z","author_association":"NONE","body":"犹豫，用还是不用！"}}
{"actor":{"display_login":"Xiaolong145682"}}