繼webpack之後的又一打包神器parcel
序言：
在繼grunt、gulp實現自動化構建之後，webpack又引領前端打包潮流，眾所周知的是，
vue-cli的腳手架就是基於webpack進行專案打包的。
而webpack還在上升的勢頭的時候，又一打包神器橫空出世——parcel。
Parcel
快速，零配置的 Web 應用程式特性
快速打包
Parcel 使用工作程序啟用多核編譯，並具有檔案系統快取，即使在重新啟動後也可快速重新構建。
打包所有資源
Parcel 支援JS，CSS，HTML，檔案資源等等 - 不需要安裝任何外掛。
自動轉換
在需要時，程式碼使用 Babel，PostCSS 和 PostHTML 自動轉換 - 即使是 node_modules。
零配置程式碼拆分
Parcel 使用動態 import() 語法拆分您的輸出包，所以只加載初始載入時所需的內容。
模組熱替換
當你在開發過程中進行更改時，Parcel 會自動更新瀏覽器中的模組，不需要進行任何配置。
友好的錯誤記錄
遇到錯誤時，Parcel 會以語法高亮的形式列印的程式碼幀，以幫助你查明問題。
為啥用 parcel？
現在有很多Web應用程式打包工具，包括webpack 和 browserify。所以，我們為什麼還需要一個呢？主要的原因是圍繞開發者的經驗。
很多打包工具都圍繞配置和外掛進行構建的，因此看到有500行以上配置的應用程式正常執行並不罕見。這種配置不僅繁瑣和費時，而且也很難得到正確的配置，必須為每個應用程式複製。通常情況下，這可能導致次優化的應用程式傳送到生產環境。parcel 被設計為零配置：只要將它指向你的應用程式的入口點，它就能做正確的事情。
現有的打包工具大多都執行得慢，具有很多檔案和依賴的大型應用將花費數分鐘去構建，隨著時間的推移，這將會相當痛苦的事情。監聽檔案變更能幫助重新編譯，當時初始構建的時候通常還是會很慢。parcel 利用現代的多核處理能力和工作執行緒去並行編譯你的程式碼。這導致了初始構建的速度極大的提升。它還有一個檔案系統快取，可以儲存每個檔案的編譯結果，以便更快的後續啟動。
最後，現有的打包工具都是圍繞字串載入/轉換進行構建的，其中轉換需要一個字串，解析它，然後進行一些轉換，之後再次生成程式碼。通常這最終導致許多解析和程式碼生成在單個檔案上執行，這是低效的。相反，parcel 的轉換工作在 AST上，所以這樣每個檔案就有一個解析，多個轉換和一個程式碼生成。
Parcel 是如何工作的？
Parcel 將 資源 樹轉換成 包(bundles) 樹。許多其它的打包工具基本上是基於 JavaScript 資源，還有附加在其上的其它格式的資源。例如，在 JS 檔案中內聯成字串。 Parcel 是對檔案型別無感知的，它能按你所期待的方式那樣與任意型別的資源工作，且毋須配置。
構建資源樹
Parcel 接受單個入口資源作為輸入，可以是任意型別：JS、HTML、CSS、圖片檔案等等。在 Parcel 中定義了許多不同的資源型別，它知道如何去處理特定的檔案型別。資源會被解析，資源的依賴會被提取，資源會被轉換成最終編譯好的形態。此過程建立了一個資源樹。
構建檔案束樹
一旦資源樹被構建好，資源會被放置在檔案束樹中。首先一個入口資源會被建立成一個檔案束，然後動態的 import() 會被建立成子檔案束 ，這引發了程式碼的拆分。當不同型別的檔案資源被引入，兄弟檔案束就會被建立。例如你在 JavaScript 中引入了 CSS 檔案，那它會被放置在一個與 JavaScript 檔案對應的兄弟檔案束中。如果資源被多於一個檔案束引用，它會被提升到檔案束樹中最近的公共祖先中，這樣該資源就不會被多次打包。
打包
在檔案束樹被構建之後，每個檔案束都會被 packager 寫到一個特定檔案型別的檔案中。packagers 知道如何從每個資源中將程式碼合併起來，生成到最終被瀏覽器載入的檔案中。
入門Demo
一、初始化npm
npm init
二、新增babel 並安裝 babel-preset-env依賴
1.新建.babelrc 檔案
{
"presets": [
"env"
]
}
2.安裝依賴
npm install babel-preset-env --save-dev
三、新增parcel
npm install parcel-bundler --save-dev
四、最後生成的package.json檔案大概就這樣：
{
"name": "parcel-demo",
"version": "1.0.0",
"description": "parcel",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"parcel index.html"
},
"keywords": [
"parcel"
],
"author": "aaron",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.2.0"
}
}
[ ps：給npm新增啟動項：
"start":"parcel index.html"
]
五、最後根據官網新建index.html，index.js等檔案，然後命令列打包，然後執行npm start 或 parcel index.html 啟動，簡單的demo就生成了。
index.html / index.js / main.js / main.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello Parcel</title> </head> <body> <h1 class="main">parcel</h1> <script src="./js/index.js"></script> </body> </html>
import main from './main';
main();
import classes from '../css/main.css' export default ()=>{ console.log(classes); }
.main{ background: url("../images/parcel.png"); color:red; }