捆綁內嵌

Parcel 提供了多種方式，可以在一個套件中內嵌編譯內容。

以文字形式內嵌套件

bundle-text: 範例可以用於以純文字形式內嵌套件內容。Parcel 會像一般一樣編譯已解析的檔案，包括打包所有依賴項，然後將結果以字串形式內嵌到父套件中。

這可以在許多方面使用。例如，你可以內嵌編譯的 CSS 套件，並使用結果在執行時期注入樣式標籤。這在需要控制樣式標籤插入位置的情況下很有用，例如插入到 Shadow DOM 根目錄中。

import cssText from 'bundle-text:./test.css';

// inject <style> tag
let style = document.createElement('style');
style.textContent = cssText;
shadowRoot.appendChild(style);

以資料 URL 形式內嵌

data-url: 範例允許以資料 URL 形式內嵌套件。已解析的檔案將會編譯，包括所有依賴項，並轉換為資料 URL。如果檔案為二進位格式，則會以 base 64 編碼，否則會以 URI 編碼。

一個可以派上用場的範例是在 CSS 檔案中內嵌小型圖片。

.foo {
  background: url(data-url:./background.png);
}

幕後運作

bundle-text: 和 data-url: 是使用命名管道在預設 Parcel 設定檔中實作的。@parcel/transformer-inline-string 轉換器外掛將編譯後的資產標記為內嵌，這會告訴 Parcel 不要將套件寫入磁碟，而是將其內嵌到父套件中。若要實作資料 URL，@parcel/optimizer-data-url 最佳化器外掛會用於將編譯後的套件轉換為資料 URL。

在 Parcel 設定檔中，它看起來像以下內容。每個管道中的 "..." 會告訴 Parcel 先執行與檔案相符的正常轉換器，然後再執行 @parcel/transformer-inline-string。

@parcel/config-default

{
  "transformers": {
    "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
    "data-url:*": ["...", "@parcel/transformer-inline-string"]
  },
  "optimizers": {
    "data-url:*": ["...", "@parcel/optimizer-data-url"]
  }
}

您可以建立自己的命名管道，以自訂內嵌方式，重複使用上述外掛或建立自訂外掛。請參閱 Parcel 設定檔以取得更多詳細資料。

另一個可能實用的 Parcel 外掛是 @parcel/transformer-inline。如同 @parcel/transformer-inline-string，它會將資產標記為內嵌，但結果不會編碼為字串。這表示如果內嵌套件包含程式碼，它會在父套件中執行，而不是傳回字串給使用者。如果您有自訂外掛，以某種方式包裝套件並需要在執行階段解碼它，這可能會很有用。

例如，您可能想要將檔案內嵌為 ArrayBuffer，或其他自訂編碼。這可以使用自訂最佳化器外掛實作，這會後處理套件的輸出。

import {Optimizer} from '@parcel/plugin';
import {blobToBuffer} from '@parcel/utils';

export default new Optimizer({
  async optimize({contents}) {
    let buffer = await blobToBuffer(contents);
    return {
      contents: `new Uint8Array(${JSON.stringify(Array.from(buffer))}).buffer`
    };
  }
});

現在您可以使用新的外掛定義命名管道，並將編譯後的檔案匯入為陣列緩衝區。

請參閱外掛系統文件，以取得撰寫自訂外掛的更多詳細資料，以及 Parcel 設定檔文件，以取得關於命名管道的更多資訊。

內嵌為 blob URL

您可能想要將套件的內容內聯為 blob URL，它可以傳遞給瀏覽器中的許多 Web API。@parcel/optimizer-blob-url 外掛程式可與 @parcel/transformer-inline 結合使用來執行此操作。預設情況下不會包含這些命名管線，因此您需要在 .parcelrc 中建立一個。

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "blob-url:*": ["...", "@parcel/transformer-inline"]
  },
  "optimizers": {
    "blob-url:*": ["...", "@parcel/optimizer-blob-url"]
  }
}

內聯而不轉換

在 JavaScript 中，可以在不先透過 Parcel 轉換器執行檔案內容的情況下，將其內聯。這可以使用 Parcel 靜態分析的 fs Node 模組來完成。它可以作為字串內聯為許多不同的編碼，或作為 Buffer。請參閱 Node 模擬文件以取得更多詳細資訊。

import fs from 'fs';

const sourceCode = fs.readFileSync(__dirname + '/foo.js', 'utf8');

在上述範例中，sourceCode 變數將是 foo.js 的內容，不編譯，也就是原始的原始碼，而不是套件的結果。

與其他工具整合

由於套件內聯是 Parcel 特有的功能，因此您需要設定其他工具，例如 TypeScript 或 Flow 來支援它。請參閱相依性解析文件中的設定其他工具區段，以取得如何執行此操作的詳細資訊。