今天我們要正式進入 Node.js 的專案世界 🚀

學會 npm、理解 package.json，並打造一個小專案，最後還會安裝兩個開發必備套件，讓開發更有效率。

npm 是什麼？

npm（Node Package Manager）是 Node.js 內建的套件管理工具，就像開發者的 App Store。

它能幫你做到：

• 安裝套件（library、framework、工具）
• 管理依賴版本（dependencies & devDependencies）
• 執行自訂指令（scripts）

檢查是否安裝成功：

npm -v

若沒有輸出版本，請回到 Day 2 環境安裝 的教學，確認 Node.js 與 npm 是否安裝正確。

📦 套件安裝方式

1. 全域安裝（g）

套件安裝在電腦的全域環境，可在任何地方直接呼叫：

npm install -g nodemon

// 使用
nodemon app.js

• 全域安裝適合用在 CLI 工具，例如 http-server、pm2。
• 專案相依套件不建議全域安裝，避免版本不一致。

2. 本地安裝（專案內安裝）

套件安裝在專案的 node_modules/，並寫入 package.json。

npm install express

這是最常見的安裝方式，確保團隊每個人裝到的版本一致。

3. dependencies vs devDependencies

• dependencies → 執行時需要（會部署到正式環境）

  例：express、mongoose、dotenv

  npm install express
  

• devDependencies → 只在開發/測試時需要

  例：nodemon、jest、eslint

  npm install -D nodemon jest
  

npx 是什麼？

npx 是 npm v5.2 之後內建的工具，用來 直接執行套件 CLI，不必全域安裝。

特色

• 不會污染環境
• 會優先使用專案內版本
• 適合臨時工具

範例

npx nodemon app.js           # 不用全域安裝
npx create-next-app myapp    # 建立 Next.js 專案

📊 npm / npx / npm run 對照表

• npm → 「裝東西」
• npx → 「直接跑工具」
• npm run → 「跑專案腳本」

🗂️ 建立專案

1. 初始化專案

mkdir my-app && cd my-app
npm init -y

2. 專案結構

my-app/
├── node_modules/
├── src/
│   └── index.js
├── package.json
├── package-lock.json
└── README.md

3. 建立 src/index.js

console.log("Hello from my first Node.js project 🚀");

執行：

node src/index.js
// "Hello from my first Node.js project 🚀"

📖 package.json — 專案的「設定檔」

在 Node.js 世界裡，package.json 就是 專案的身分證與設定檔。

它記錄了這個專案的基本資訊、需要的套件，以及如何啟動與管理。

1. 專案資訊

最上方通常包含：

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "這是一個範例專案",
  "author": "Howard",
  "license": "MIT"
}

• name → 專案名稱（發佈到 npm 時會用到，必須小寫、不能有空白）
• version → 專案版本（通常採用 SemVer 規範，例如 1.0.0）
• description → 專案簡介，方便別人理解
• author / license → 作者與授權方式

2. 套件依賴管理

"dependencies": {
  "express": "^4.18.2"
},
"devDependencies": {
  "nodemon": "^3.0.1"
}

• dependencies → 專案執行時需要的套件（例如 express）
• devDependencies → 只在開發/測試時需要的套件（例如 nodemon、eslint）

👉 npm install 時會依據這裡的清單安裝正確的版本。

3. 指令腳本（scripts）

"scripts": {
  "start": "node src/index.js",
  "dev": "nodemon src/index.js",
  "lint": "eslint ."
}

• npm start → 執行 node src/index.js
• npm run dev → 用 nodemon 啟動（程式改動自動重啟）
• npm run lint → 執行 ESLint 檢查程式碼

👉 scripts 是團隊協作時非常重要的工具，能統一開發流程。

4. 版本鎖定（package-lock.json）

除了 package.json，還會自動產生一個 package-lock.json：

• 精確紀錄每個套件的版本與相依關係
• 確保不同電腦、不同環境安裝出來的結果一致

🛠️ 必備開發套件

1. nodemon

自動重啟伺服器：

npm install -D nodemon

"scripts": {
  "start": "node src/index.js",
  "dev": "nodemon src/index.js"
}

執行：

npm run dev

有安裝這套件後，只要有異動到檔案，它就會幫忙自動重啟，從此不需要手動關閉server後再重啟，減少繁瑣的動作。

2. dotenv

管理環境變數：

npm install dotenv

建立 .env：

PORT=3000

在程式中使用：

import "dotenv/config";
console.log("Server will run on:", process.env.PORT);

🚀 小實作：快速打造一個小伺服器專案

import "dotenv/config";
import express from "express";

const app = express();
const port = process.env.PORT || 3000;

app.get("/", (req, res) => res.send("Hello Node.js 🚀"));

app.listen(port, () => {
  console.log(`伺服器運行中：http://localhost:${port}`);
});

執行：

npm run dev
// 伺服器運行中：http://localhost:3000

小結

今天我們學到：

1. npm 的角色與用途
2. 套件安裝方式：全域、本地、dependencies vs devDependencies
3. npx 的好處與使用情境
4. npm / npx / npm run 的差異
5. package.json 與 scripts 的使用方式
6. 兩個必備開發套件：nodemon、dotenv
7. 打造了一個小伺服器專案