使用 Parcel 建立網頁應用程式

安裝

在開始之前，您需要安裝 Node 和 Yarn 或 npm，並為您的專案建立一個目錄。然後，使用 Yarn 將 Parcel 安裝到您的應用程式中

yarn add --dev parcel

或使用 npm 執行

npm install --save-dev parcel

專案設定

現在 Parcel 已安裝，讓我們為我們的應用程式建立一些原始碼檔案。Parcel 接受任何類型的檔案作為進入點，但 HTML 檔案是一個不錯的起點。Parcel 會從那裡追蹤您所有的相依性，以建置您的應用程式。

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Parcel 內建一個開發伺服器，當您進行變更時，它會自動重新建置您的應用程式。要啟動它，請執行指向您的進入檔案的 parcel CLI

yarn parcel src/index.html

或使用 npm 執行

npx parcel src/index.html

現在在您的瀏覽器中開啟 http://localhost:1234/，以查看您在上面建立的 HTML 檔案。

接下來，您可以開始將相依性加入您的 HTML 檔案，例如 JavaScript 或 CSS 檔案。例如，您可以建立一個 styles.css 檔案，並使用 <link> 標籤從您的 index.html 檔案參考它，並使用 <script> 標籤參考一個 app.js 檔案。

src/styles.css

h1 {
  color: hotpink;
  font-family: cursive;
}

src/app.js

console.log('Hello world!');

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

當您進行變更時，您應該會看到您的應用程式在瀏覽器中自動更新，甚至不需要重新整理頁面！

在此範例中，我們展示了如何使用純 HTML、CSS 和 JavaScript，但 Parcel 也支援許多常見的網路架構和語言，例如 React 和 TypeScript。查看文件中的食譜和語言部分，以了解更多資訊。

封裝腳本

到目前為止，我們一直直接執行 parcel CLI，但建立一些腳本放在 package.json 檔案中會很有用，讓執行更輕鬆。我們也會設定一個腳本，使用 parcel build 指令為製作應用程式。最後，你也可以在 source 欄位中單一位置宣告你的條目，這樣就不需要在每個 parcel 指令中重複它們。

package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

現在你可以執行 yarn build 為製作專案，執行 yarn start 啟動開發伺服器。

宣告瀏覽器目標

預設情況下，Parcel 不執行任何程式碼轉譯。這表示如果你使用現代語言功能撰寫程式碼，Parcel 會輸出這些功能。你可以使用 browserslist 欄位宣告應用程式支援的瀏覽器。當宣告此欄位時，Parcel 會相應地轉譯你的程式碼，以確保與你支援的瀏覽器相容。

package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

你可以在目標頁面中進一步了解目標，以及 Parcel 自動支援差異化捆綁。

後續步驟

現在你已經設定專案，準備好進一步了解 Parcel 的一些進階功能。查看有關開發和製作的文件，並參閱食譜和語言區段，以取得使用熱門網路架構和工具的更深入指南。