[Parcel] 刻完 HTML 後不再按重新整理 還幫你打包 JavaScript
寫網頁最讓人不爽的就是 — 每次刻完 HTML 或是調整完 CSS 樣式，還得一直重新整理，才能知道網頁變成什麼樣子，有時僅僅是移除一個標籤，都得重新整理，手直接痠到哭。
寫給網頁設計、前端新手看
初接觸網頁設計的朋友們，一定有這麼一個時期…
那時你的網頁只有三個檔案，分別是 HTML / CSS / JavaScript ，找到好用的第三方函式庫 (例如 jQuery / Bootstrap …) 也只是用 script / link 標籤引入，在這個新手都會經歷的階段，當然也是最容易碰到前文提到的不爽狀況。
直接破題
透過標題所提到的 Parcel ，你可以輕易的解決這個問題
在 NPM 的倉庫裡安裝Parcel
$ npm install parcel-bundler -g
好接下來你只要做一件事，就是輸入指令如下
$ parcel index.html
好，接下就卸下心來，好好專注在開發上，之後 Parcel 會一直幫你 watch 程式碼是否有變化，無論是 html / js / css ，只要有改動他都會 refresh 一次。
文章結束了嗎？
當然不，如果我的文章這麼精簡，我不如開個粉絲團叫下面+1 +1就好啦！身為一個優質的寫手，我是想藉由這個好工具亂入一些我的觀察。
我想探討的是為什麼說這是前端新手最不爽的點？
在一定接觸後，多數人會往主流的三大框架學習，無論是 Angular / Vue / React ，都擁有相當優質的生態圈，多數時候官方都有了現存的模板 (template) 或稱作 starter-kit 。
然而這些模板裡頭，已有配置好的熱加載，甚至是 CSS 的預處理 (postcss) 、代碼壓縮、 service-worker …(這些在此篇文章先不提)，所以就逐漸離開了新手區的不適感。
Webpack — 前端工程化
Webpack 的出現，幾乎是劃破時代的利刃，上述所提到的許多工程化插件 (plugin) ，主流生態圈皆是基於此，固然將前端推向工程化的時代，至於他的初衷則是將 JavaScript 的 code 給合併 (bundle) 起來。
雖然 Webpack 一開始的出現只是為了將分散的程式碼合併，但到了現在這時代， Webpack 堪稱前端界的makefile，這句話大概又誇獎、又褒貶…哈…
因為繁雜的配置讓人相當詬病，而且官方文檔有種不可描述的哈味，也因此許多前端好手僅管產出多高，但怎麼樣就是跨不過配置 Webpack 這關。
（當然也有許多人認為 — 工程化事並不關己。）
所以跟 Parcel 的關聯是？
儘管在 Webpack 後續改版，各種配置友好、低配置被吹爆（幹那以前是多難用？），但是還是讓名為 Parcel 的工具人潮群聚。
Parcel 想解決的事情很簡單，就是解決 Webpack 想解決的所有事 — 且乾淨利落的解決。
（咦？聞到開戰的味道了…並不 — 實際上我多數的專案還是透過Webpack啦！）
我們往下看看 Parcel 官方的介紹
哇 Parcel 功能也太多了吧？
沒錯，除了釋放 F5 鍵以外，如果你真的是一個網頁設計新人，我認為這個程式是相當適合你的。
不只是熱加載，你可以試著把當初 CDN 引入的 library 一個一個剔除，並在 index.js 統一將其引入，一樣能夠使用這些函式庫。
打包也很簡單:
$ parcel build index.html
$ cd dist/
對了，打包過後會將程式碼壓縮，令使用者載入時間降低，獲得更好的使用者體驗。
總之，快點試試看吧！還有更多好用的功能，有了 Parcel ，下次如果只是想玩玩 React / Vue ，就不用被繁雜的 template 綁住了。
react-parcel-template
這是我用 Parcel 配置好的仿 create-react-app 的模板，我把主分支的 commit 給 squash 到初始 commit ，如果要使用來做為開發的人，可以直接 clone 下來，照著文檔操作。
其他像是 jQuery + Bootstrap 也能能完全透過 Parcel 全部引入進來並熱加載、生產環境壓縮，也就是說不管什麼族群，我想你都沒有拒絕 Parcel 這個好用工具的理由。
寫在最後
以上說的功能 Webpack 都能做到，甚至生態圈更豐富、更多元、更強大，但我在文內卻一直忍不住吐槽，因為實在對新手實在是不太友好。
如果今天一個用 Bootstrap 做社團網站的高中生，搞懂 Webpack 大概都…已經上大學了吧。
不能否認這些工具、生態圈在前端工程的地位，希望我這篇文章，能成為你入門工程化的一個契機。
都看到這邊了，想必…絕對不會吝於鼓掌的，下篇文章見啦！
