Yarn Start 與 Yarn Build 的差異與用途

在使用前端開發工具時，yarn start 和 yarn build 是最常見的兩個指令，特別是在使用 React、Vue 或其他 JavaScript 框架時。

這兩個指令雖然都與專案的運行和打包有關，但它們的用途和作用卻完全不同。

對於剛接觸前端開發的初學者來說，理解這兩個指令的差異至關重要。

本文將詳細解析 yarn start 和 yarn build 的作用、運行原理，以及它們在開發與部署中的角色。

什麼是 Yarn？

在深入探討 yarn start 和 yarn build 之前，我們需要先了解 Yarn 是什麼。

Yarn 是 Facebook 開發的一個JavaScript 套件管理工具，用來管理專案中的相依套件，類似於 NPM（Node Package Manager）。

它的優勢在於更快的安裝速度、較佳的相依性管理以及更可靠的鎖定機制（yarn.lock）。

在使用 Yarn 之前，通常需要先安裝 Yarn，可以透過以下方式安裝：

npm install -g yarn  # 透過 npm 全域安裝 Yarn

安裝完成後，即可在專案內使用 Yarn 來管理依賴套件與執行指令。

yarn start 是什麼？（開發模式）

yarn start 主要用於啟動開發伺服器，讓開發者能夠在本機進行即時開發與測試。

當我們執行 yarn start，它會載入 package.json 中的 scripts 區塊，並執行對應的指令，例如：

"scripts": {
  "start": "react-scripts start"
}

當我們在專案目錄下執行以下指令：

yarn start

它的作用是：

• 啟動開發伺服器（通常是 webpack-dev-server 或 Vite 等工具）。
• 以開發模式運行專案，支援 即時更新（Hot Module Replacement, HMR），讓開發者在編輯程式碼後，瀏覽器能即時反映變更。
• 預設開啟 localhost:3000（React）或 localhost:5173（Vite）等網址，讓開發者可以即時預覽網站的變化。

適用場景

• 本地開發：當開發者需要即時預覽變更時。
• 測試 UI 介面：適合用來快速測試前端畫面與功能。
• 不進行最佳化：因為是開發模式，不會進行壓縮或最佳化，程式碼的效能與正式版會有所不同。

範例

在 React 專案中，執行 yarn start 之後，終端機會出現類似這樣的輸出：

Starting the development server...

Compiled successfully!

You can now view your app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.100:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

這表示開發伺服器已經啟動，可以開啟瀏覽器查看專案畫面。

yarn build 是什麼？（正式版打包）

與 yarn start 不同，yarn build 用於打包專案，準備部署到正式環境。在 package.json 中，它通常對應於以下指令：

"scripts": {
  "build": "react-scripts build"
}

當我們執行以下指令時：

yarn build

它的作用是：

• 將程式碼編譯、壓縮、最佳化，以減少檔案大小並提升載入速度。
• 去除開發用的錯誤訊息與偵錯工具，提高應用程式的效能。
• 產生靜態檔案（HTML、CSS、JavaScript），這些檔案可以直接部署到伺服器或 CDN 上。
• 存放於 /build 目錄（React 專案）或 /dist 目錄（Vite、Vue 等框架）。

適用場景

• 部署到正式環境：當專案要上線到伺服器時，必須先執行 yarn build。
• 產生最佳化的靜態檔案：確保應用程式載入速度快、效能佳。
• 前端部署到 CDN 或靜態伺服器：例如將 build/ 目錄內的檔案上傳到 Netlify、Vercel、GitHub Pages 或 Nginx 伺服器。

範例

執行 yarn build 之後，終端機可能會顯示：

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  200 KB    build/static/js/main.abcdef.js
  30 KB     build/static/css/main.123456.css

The project is ready to be deployed.

這表示專案已成功編譯為正式版本，並可以進行部署。

yarn start vs yarn build 差異總結

yarn start 和 yarn build 的關係

開發流程中，我們通常會按照以下步驟：

1. 開發階段：使用 yarn start 來即時查看程式變更，測試 UI 和功能。
2. 測試與修正：確認功能無誤後，準備部署。
3. 正式版打包：使用 yarn build 產生最佳化的靜態檔案。
4. 部署：將 build/ 目錄內的檔案上傳到伺服器。

這兩個指令的運行方式不同，但彼此互補，共同構成了前端開發與部署的完整流程。

結論

對於初學者來說，理解 yarn start 和 yarn build 的差異，能夠幫助你更有效率地開發與部署專案。

yarn start 讓我們能夠快速測試與開發，而 yarn build 則確保專案能夠以最佳狀態運行在正式環境中。

掌握這兩個指令後，你將能夠更加流暢地進行前端開發，無論是學習 React、Vue 還是其他前端框架，都能運用自如！