繼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 的轉換工作在 AST上，所以這樣每個文件就有一個解析，多個轉換和一個代碼生成。
Parcel 是如何工作的？
Parcel 將 資源 樹轉換成 包(bundles) 樹。許多其它的打包工具基本上是基於 JavaScript 資源，還有附加在其上的其它格式的資源。例如，在 JS 文件中內聯成字符串。 Parcel 是對文件類型無感知的，它能按你所期待的方式那樣與任意類型的資源工作，且毋須配置。
構建資源樹
Parcel 接受單個入口資源作為輸入，可以是任意類型：JS、HTML、CSS、圖片文件等等。在 Parcel 中定義了許多不同的資源類型，它知道如何去處理特定的文件類型。資源會被解析，資源的依賴會被提取，資源會被轉換成最終編譯好的形態。此過程創建了一個資源樹。
構建文件束樹
一旦資源樹被構建好，資源會被放置在文件束樹中。首先一個入口資源會被創建成一個文件束，然後動態的 import() 會被創建成子文件束 ，這引發了代碼的拆分。當不同類型的文件資源被引入，兄弟文件束就會被創建。例如你在 JavaScript 中引入了 CSS 文件，那它會被放置在一個與 JavaScript 文件對應的兄弟文件束中。如果資源被多於一個文件束引用，它會被提升到文件束樹中最近的公共祖先中，這樣該資源就不會被多次打包。
打包
在文件束樹被構建之後，每個文件束都會被 packager 寫到一個特定文件類型的文件中。packagers 知道如何從每個資源中將代碼合並起來，生成到最終被瀏覽器加載的文件中。
[ps：基於官網https://parceljs.org/進行的總結]
入門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; }
截圖：
更多
如果報了上面那些錯誤。貌似node.js 7.6版本以下對await / async 不支持，所以在執行打包時需要升級node.js版本。
parcel中文官網：http://www.parceljs.io/
parcel GitHub：https://github.com/parcel-bundler/parcel
關於parcel的更多使用方法還需深入了解才行，每一個打包工具我都覺得都有它的獨特魅力。
期待parcel的發展......
繼webpack後又一打包神器Parcel