繼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