Parcel v2.12.0

Parcel v2.12.0 引入了對巨集的支持，讓您能夠在建置時使用常規 JavaScript 函數產生程式碼。它還包含一個新的線上 REPL，改進了我們的 CSS 捆綁支援，新增了設定選項來微調應用程式的程式碼分割，並改善了效能和記憶體使用量。

巨集

Parcel v2.12.0 引入了對 巨集 的支援。巨集最初實作於 Bun，是會在建置時而非捆綁時執行的 JavaScript 函數。巨集傳回的值會內嵌到捆綁中，取代原始函數呼叫。這讓您能夠產生常數、程式碼，甚至額外的資源，而不需要任何自訂外掛程式。

巨集是使用 import 屬性 匯入的，以表示它們應該在建置時執行，而不是捆綁到輸出中。您可以將任何 JavaScript 或 TypeScript 模組匯入為巨集，包括內建的 Node 模組和 npm 套件。

這個範例使用 regexgen 函式庫在建置時從一組字串產生最佳化的正規表示式。

import regexgen from 'regexgen' with {type: 'macro'};

const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
console.log(regex);

這會編譯成以下捆綁

console.log(/foo(?:zap?|ba[rz])/);

正如您所見，regexgen 函式庫已經完全編譯完畢，而我們得到了一個靜態正規表示式！

Parcel 的巨集實作也讓您能夠在建置時產生函數，甚至發出新的資源。例如，巨集可以產生 CSS，這些 CSS 會靜態萃取到 CSS 捆綁中，就像從 JS 檔案匯入一樣。

這個範例接受一個 CSS 字串並傳回一個產生的類別名稱。CSS 會新增為一個資源並捆綁到 CSS 檔案中，而 JavaScript 捆綁只會包含產生的類別名稱作為一個靜態字串。

import {css} from './css.ts' with {type: 'macro'};

<div className={css('color: red; &:hover { color: green }')}>
  Hello!
</div>

import type {MacroContext} from '@parcel/macros';

export async function css(this: MacroContext | void, code: string) {
  let className = hash(code);
  code = `.${className} { ${code} }`;

  this?.addAsset({
    type: 'css',
    content: code
  });

  return className;
}

上述範例的套件輸出會如下所示

<div className="ax63jk4">
  Hello!
</div>

.ax63jk4 {
  color: red;
  &:hover {
    color: green;
  }
}

這基本上是一個 CSS-in-JS 函式庫，只需幾行程式碼即可進行建置時間靜態萃取！由於巨集只是常規 JavaScript 或 TypeScript 函式，因此您可以在其上建立任何所需的 API，例如使用物件 API 或主題值產生 CSS。我們很期待看到這項創新解鎖哪些功能，包括 CSS-in-JS 以及更多功能。查看文件以進一步了解。

REPL

Parcel 現在有一個REPL，您可以在瀏覽器中直接試用！Niklas Mischkulnig多年來一直致力於 REPL，我們很興奮它終於整合到我們的網站中。REPL 具備完整的程式碼編輯器、檔案瀏覽器，並支援大多數 Parcel 功能，包括監控模式、開發伺服器、熱模組替換等。

在底層，REPL 由尖端的網路技術提供支援，包括 Web Assembly、用於主機開發伺服器的服務工作人員、用於多核心處理的網路工作人員後端，以及用於套件管理員快取的 IndexedDB。它甚至可以透過執行 Yarn 的已編譯版本來安裝 npm 套件。

REPL 非常適合用於玩 Parcel 並了解如何編譯。它也很適合建立可分享的錯誤重現。查看！

Lightning CSS 支援的套件

一段時間以來，Parcel 預設使用Lightning CSS轉換 CSS 檔案。現在 Parcel 也使用它來套件 CSS 檔案。這支援現代 CSS 功能，例如具有串聯層的@import，改進了使用媒體和支援查詢進行匯入的支援，以及更正地處理複雜的 CSS 排序問題。

手動共用套件

預設情況下，Parcel 會自動將您的程式碼分割，以達到最佳快取效率。應用程式中多個部分共用的常見模組會萃取到 共用套件 中，以便瀏覽器可以分別載入和快取這些模組。但有時，您可能比 Parcel 更了解應用程式的特定部分應該如何載入，並選擇在前端過度擷取，以便在後端進行最佳化。在此版本中，我們引入了對手動共用套件的支援，以解決此問題。

手動共用套件讓您可以設定 Parcel，以確保特定模組始終會一起套件，無論它們在哪裡使用。例如，您可以建立一個供應商套件，載入一組常用的函式庫，或將特定路由的資產分組到單一套件中。這是使用 glob 與檔案路徑比對來指定的，以及其他選項，例如依據根資產或類型分組、分割成多個平行 http 要求等。請查看 文件 以取得所有詳細資訊。

手動共用套件最適合在嘗試 Parcel 的預設套件演算法並執行實際效能測試後套用。當您有特定效能問題無法透過變更程式碼結構來解決時，請使用手動共用套件來覆寫 Parcel 的預設行為。手動共用套件在從其他套件管理程式（例如 webpack）移植程式碼時也很有用。

效能改善

與大多數 Parcel 版本相同，v2.12.0 也包含一些效能改善。在此版本中，我們改善了核心圖形資料結構，將記憶體使用量減少約 52%，並將寫入效能改善約 5%。對於一個真實世界的超大型應用程式，這相當於減少約 800MB 的記憶體使用量，且不會降低啟動、建置或關閉時間！如果您有興趣瞭解我們如何進行這些最佳化，請查看 PR。此外，關於我們由 SharedArrayBuffer 支援的客製圖形資料結構，我們現在有一些 文件。

在此版本中，我們也改善了 Parcel 將圖形儲存在磁碟上的方式，以便在開發期間的閒置時間中以小區塊進行處理，而不是在序列化圖形的過程中阻擋程序關閉。我們現在會追蹤哪些部分已修改，並只重新序列化那些部分，而不是一次序列化整個圖形。這應可改善 Parcel 在超大型專案中的關閉效能。

謝謝！

感謝所有為此版本做出貢獻的人！查看 完整變更記錄，了解所有其他錯誤修正和改善。

• GitHub
• Discord 社群
• 在 Open Collective 上支持我們