Parcel 它如何運(yùn)作

它如何運(yùn)作

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

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

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

2. 構(gòu)建 bundle 樹

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

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

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

3. 打包

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