新一代打包神器parcel簡介

時間 2019-12-10

標籤新一代打包神器 parcel 簡介简体版

原文原文鏈接

官方地址： https://parceljs.org/getting_...

Parcel 是 Web 應用打包工具，適用於經驗不一樣的開發者。它利用多核處理提供了極快的速度，而且不須要任何配置。html

特性

快速打包：多核編譯，以及文件系統緩存，即便在從新啓動以後也能快速從新構建。
支持JS、CSS、HTML、文件資源等，不須要安裝任何插件。
在須要的時候自動使用Babel、PostCSS和PostHTML自動轉換模塊，甚至是node_modules。
零配置,代碼拆分，使用動態import語句分隔。
內置支持模塊熱替換。
友好的錯誤記錄體驗，語法突出顯示的代碼幀有助於查明問題。

工做方式

parcel 將資源樹轉換爲 bundle 樹。許多其它的打包工具基本上都是基於 JS 資源，其它格式都是粘貼的-例如，默認狀況下以字符串的形式內嵌到 JS 中。parcel 是文件類型無關的-它能夠按照你指望的方式與任何類型的資源一塊兒工做，無需配置。node

parcel 將一個入口點做爲輸入，能夠是任何類型的：JS文件，HTML，CSS，image 等。在 parcel 中定義了各類資源類型，它們知道如何處理特定的資源類型。資源文件被解析，它的依賴關係被提取，並轉換成最終的編譯形式。這建立了一個資源樹。webpack

一旦資源樹被構建，資源就被放入一個bundle樹中。爲入口資源建立一個 bundle，併爲動態導入的資源建立子 bundle，這回致使代碼拆分的發生。當導入不一樣類型的資源的時候就會建立子 bundle，例如若是你在 JavaScript 中導入 CSS 文件，它就會打包成對應 JavaScript 的兄弟 bundle。若是一個資源須要多個bundle，它會被打包到最近的共同祖先，所以它不會被包含屢次。git

在構建bundle樹以後，每個包都有特定的文件類型的包裝器寫入文件。打包器知道如何將每一個資源的代碼合併到由瀏覽器加載的最終文件中。github

入門

安裝
yarn global add parcel-bundlerweb

或npm

npm install -g parcel-bundler瀏覽器
Parcel 能夠將任何類型的文件做爲 entry point(入口點)，可是 HTML 或 JavaScript 文件是一個很好的開始。若是你使用相對路徑將你的主 JavaScript 文件連接到 HTML 中，Parcel 也會爲你處理，並將該引用替換爲輸出文件的URL。緩存
```
<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
```
```
console.log("hello world");
```
Parcel 內置了一個開發服務器，這會在你更改文件時自動重建你的應用程序，並支持模塊熱替換，以便你快速開發。你只需指定入口文件便可：服務器
```
parcel index.html
```

webpack與parcel比較

Webpack 打包時間 = parse string n + transform n + parse to AST + compress

Parcel 打包時間 = parse to AST + transform * n + compress

Webpack 之因此有時感受很慢，是由於代碼轉譯全靠 loader 進行字符串處理。好比一個 index.js 有可能要經歷 loaderA -> loaderB -> loaderC，這些 loader 徹底不知道彼此之間的存在，都是接過來一個字符串本身處理，而後再交給下一個。若是最後再 uglify 一下還要先 parse 爲 AST（抽象語法樹）再壓縮，這一步也是比較耗時的。

所以，parcel 至少爲咱們提供了一個很好的思路：多步轉譯 + 壓縮時，每一步均可以利用到已經解析事後的 AST，只要完成各自的 transform 便可。