使用 Parcel 建立函式庫

安裝

在我們開始之前，你需要安裝 Node 和 Yarn 或 npm，並為你的專案建立一個目錄。接著，使用 Yarn 安裝 Parcel

yarn add --dev parcel

或使用 npm 執行

npm install --save-dev parcel

專案設定

現在 Parcel 已安裝，讓我們為我們的函式庫設定一個 package.json 檔案。我們將使用 source 欄位來參照我們的原始碼檔案，並建立一個 main 目標作為我們的建置輸出檔案。這將由使用我們的函式庫的其他工具（例如打包器或 Node.js）使用。

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

上述範例使用 src/index.js 作為我們的函式庫原始碼，因此讓我們接著建立那個檔案。在此範例中，我們使用一個 JavaScript 檔案，但我們也可以在此參照 TypeScript 檔案或任何其他編譯成 JavaScript 的語言。

src/index.js

export function add(a, b) {
  return a + b;
}

現在，我們的函式庫匯出一個稱為 add 的單一函式，它將其兩個參數加總並傳回結果。由於這是使用 export 關鍵字寫在 ES 模組語法中，Parcel 會預設將我們的程式碼編譯成 CommonJS 模組，如 main 欄位所預期的那樣。

若要建置我們的函式庫，請在專案目錄中執行 npx parcel build。Parcel 會建置你的原始碼，並在 dist/main.js 中輸出一個 JavaScript 檔案，如 main 欄位所參照的。

封裝指令碼

到目前為止，我們一直直接執行 parcel CLI，但建立一些腳本在你的 package.json 檔案中會很有用，讓這更容易。我們也會設定一個 watch 腳本，它會觀察你的原始檔案是否有變更，並自動重新建置，這樣你就不需要在開發時手動執行 build 腳本，因為你在進行變更。

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

現在你可以執行 yarn build 來建置你的專案以發布，並在開發中執行 yarn watch。

CommonJS 和 ES 模組

Parcel 接受 CommonJS 和 ES 模組作為輸入，並可以輸出其中一種或多種格式，這取決於你的 package.json 中宣告的內容。若要新增 ES 模組目標，請將 module 欄位新增到你的 package.json。

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

現在 Parcel 會將 dist/main.js 輸出為 CommonJS 模組，並將 dist/module.js 輸出為 ES 模組。使用你的函式庫的工具會選擇他們支援的其中一種。

你也可以使用檔案副檔名來指出要輸出的模組類型。.mjs 副檔名會產生 ES 模組，而 .cjs 副檔名會產生 CommonJS 模組。這會覆寫 main 欄位的預設行為。"type": "module" 欄位也可以設定在 package.json 中，以將 main 欄位視為 ES 模組。請參閱 Node.js 文件以取得更多詳細資訊。

TypeScript

Parcel 也支援建立以 TypeScript 編寫的函式庫。source 欄位可以指向您的入口 .ts 或 .tsx 檔案，而 Parcel 會自動將 JavaScript 輸出到您的目標。您也可以在 package.json 中使用 types 欄位指向 .d.ts 檔案，而 Parcel 會在編譯的 JavaScript 旁邊產生一個輸入檔案。這讓像 VSCode 的編輯器可以為您的函式庫使用者提供自動完成功能。

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "devDependencies": {
    "parcel": "latest"
  }
}

現在 Parcel 會輸出一個 dist/types.d.ts 檔案，其中包含函式庫的類型定義，以及編譯的程式碼。

後續步驟

現在您已經設定好專案，準備了解 Parcel 的一些更進階功能。查看有關目標的文件，並參閱食譜和語言部分，以取得使用熱門 Web 框架和工具的更深入指南。