使用 pnpm 替代 npm

使用 pnpm 替代 npm 來安裝和管理 React 專案會更高效，因為 pnpm 使用軟連結（symlink）來節省磁碟空間並加速依賴安裝。以下是使用 pnpm 安裝和設定 React 開發環境的步驟：

1. 安裝 Node.js 與 pnpm

• 安裝 Node.js：
  • 前往 Node.js 官網，下載並安裝最新穩定版本（LTS）。
  • 安裝完成後，檢查 Node.js 是否安裝成功：

    node -v
    

• 安裝 pnpm：
  • 使用以下命令安裝 pnpm（需要 Node.js 和 npm）：

    npm install -g pnpm
    

  • 檢查 pnpm 是否安裝成功：

    pnpm -v
    

2. 建立 React 專案

• 使用 pnpm 來創建 React 專案：
  • pnpm 同樣支持 Create React App，執行以下命令來建立專案：

    pnpm create react-app my-app
    

    此命令會自動下載並安裝所有所需的依賴，並創建一個名為 my-app 的 React 專案。

3. 啟動開發伺服器

專案創建完成後，您可以直接進入專案目錄並啟動開發伺服器：

• 進入專案目錄：

   cd my-app
  

• 使用 pnpm 啟動開發伺服器：

   pnpm start
  

這會啟動本地開發伺服器，預設情況下應用會在 http://localhost:3000 開啟，並顯示您的 React 應用。

4. 安裝其他依賴

如果您需要安裝其他的依賴庫，比如 React Router 或 Axios，您可以使用以下命令：

• 安裝 React Router：

   pnpm add react-router-dom
  

• 安裝 Axios：

   pnpm add axios
  

與 npm 不同的是，pnpm 會更快地安裝依賴並節省磁碟空間，特別是在多個專案共享相同依賴的情況下。

5. 構建專案

當專案開發完成後，您可以使用以下命令來進行生產構建：

pnpm run build

這會生成一個優化過的靜態文件夾，該文件夾可以直接用於部署至伺服器或靜態網站托管平台。

---

這些步驟讓您可以使用 pnpm 管理 React 專案，並享受更快速和高效的依賴管理體驗。