Parcel 它如何運作

它如何運作

Parcel 將 資源 樹轉(zhuǎn)換成 bundle 樹。許多其它的打包工具基本上是基于 JavaScript 資源，還有附加在其上的其它格式的資源。例如，在 JS 文件中內(nèi)聯(lián)成字符串。 Parcel 是對文件類型無感知的，它能按你所期待的方式那樣與任意類型的資源工作，且毋須配置。Parcel 的打包流程共有三個步驟。

1. 構(gòu)建資源樹

Parcel 接受單個入口資源作為輸入，可以是任意類型：一個 JS 文件、HTML、CSS 和圖片等等。有許多不同的資源類型在 Parcel 中被定義，它知道如何去處理特定的文件類型。資源會被解析，資源的依賴會被提取，資源會被轉(zhuǎn)換成最終編譯好的形態(tài)。此過程創(chuàng)建了一個資源樹。

2. 構(gòu)建 bundle 樹

一旦資源樹被構(gòu)建好，資源會被放置在 bundle 樹中。首先一個入口資源會被創(chuàng)建成一個 bundle，然后動態(tài)的 import() 會被創(chuàng)建成子 bundle ，這引發(fā)了代碼的拆分。

當不同類型的文件資源被引入，兄弟 bundle 就會被創(chuàng)建。例如你在 JavaScript 中引入了 CSS 文件，那它會被放置在一個與 JavaScript 文件對應(yīng)的兄弟 bundle 中。

如果資源被多于一個 bundle 引用，它會被提升到 bundle 樹中最近的公共祖先中，這樣該資源就不會被多次打包。

3. 打包

在 bundle 樹被構(gòu)建之后，每個 bundle 都會被 packager 寫到一個特定文件類型的文件中。packagers 知道如何從每個資源中將代碼合并起來，生成到最終被瀏覽器加載的文件中。