2025-02-08 00:53:33 +08:00
|
|
|
|
# 🌟 Node.js 與 npm 簡介
|
|
|
|
|
|
|
|
|
|
|
|
## 📌 Node.js 是什麼？
|
|
|
|
|
|
Node.js 是一個 **不需要開啟網頁就能執行 JavaScript** 的環境，讓 JavaScript 可以在 **伺服器端運行**，而不只是瀏覽器內使用。
|
|
|
|
|
|
|
|
|
|
|
|
## 📌 npm（Node Package Manager）是什麼？
|
|
|
|
|
|
npm 是 **Node.js 內建的套件管理工具**，類似於 `pip`（Python）或 `NuGet`（C#）。
|
|
|
|
|
|
它的主要用途是：
|
|
|
|
|
|
- **管理 JavaScript 套件**（安裝、更新、移除）
|
|
|
|
|
|
- **處理前端與後端的開發依賴**
|
|
|
|
|
|
- **自動化開發工作（如打包、測試、部署）**
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🔧 為什麼使用 React 仍然需要 npm？
|
|
|
|
|
|
npm 本身是 **JavaScript 寫成的工具**，**需要 Node.js 在背景執行** 來處理指令。
|
|
|
|
|
|
雖然 **React 只負責前端開發，不會用到 Node.js**，但它仍然需要 npm 來安裝開發工具與相關套件。
|
|
|
|
|
|
|
|
|
|
|
|
**例如，開發 React 項目時，你可能會用到以下工具：**
|
|
|
|
|
|
|
|
|
|
|
|
### 📦 **常用 npm 套件（React 開發必備）**
|
|
|
|
|
|
| **類別** | **套件名稱** | **用途** |
|
|
|
|
|
|
|----------|------------|---------|
|
|
|
|
|
|
| **React 本體** | `react`, `react-dom` | React 組件核心 |
|
|
|
|
|
|
| **開發工具** | `vite`, `webpack` | 開發環境、建置專案 |
|
|
|
|
|
|
| **TypeScript 支援** | `typescript` | 強型別 JavaScript |
|
|
|
|
|
|
| **狀態管理** | `redux`, `zustand` | 管理全域狀態 |
|
|
|
|
|
|
| **UI 框架** | `tailwindcss`, `material-ui` | 美化前端 UI |
|
|
|
|
|
|
| **前端路由** | `react-router-dom` | 處理單頁應用（SPA）導航 |
|
|
|
|
|
|
| **API 請求** | `axios`, `fetch` | 透過 HTTP 取得數據 |
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 如何安裝 Node.js 與 npm？
|
|
|
|
|
|
📌 **1. 下載與安裝 Node.js（自動附帶 npm）**
|
|
|
|
|
|
🔗 [Node.js 官方網站](https://nodejs.org/)（建議下載 LTS 版本）
|
|
|
|
|
|
|
|
|
|
|
|
📌 **2. 檢查 Node.js 與 npm 是否安裝成功**
|
|
|
|
|
|
```bash
|
|
|
|
|
|
node -v # 檢查 Node.js 版本
|
|
|
|
|
|
npm -v # 檢查 npm 版本
|
|
|
|
|
|
|
2025-02-08 00:42:09 +08:00
|
|
|
|
|
|
|
|
|
|
# Vscode編譯器
|
|
|
|
|
|
vscode本身沒有支援npm，需去下載nodejs，https://nodejs.org/zh-tw
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
下載完vscode終端檢查有無node.js
|
|
|
|
|
|
```
|
|
|
|
|
|
node -v
|
|
|
|
|
|
```
|
|
|
|
|
|
檢查有無npm
|
|
|
|
|
|
```
|
|
|
|
|
|
npm -v
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Package.json
|
|
|
|
|
|
這個跟nuget一樣會有一個dependencies去記錄你安裝的套件
|
|
|
|
|
|
```
|
|
|
|
|
|
"dependencies": {
|
|
|
|
|
|
"react": "^18.2.0",
|
|
|
|
|
|
"react-dom": "^18.2.0",
|
|
|
|
|
|
"react-router-dom": "^6.7.0"
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
當別人拿到你的程式碼時，他們只需要執行
|
|
|
|
|
|
```
|
|
|
|
|
|
npm install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
先下載Node.js 並安裝
|
|
|
|
|
|
|
|
|
|
|
|
於準備開發的資料夾下方開啟CMD
|
|
|
|
|
|
|
|
|
|
|
|
檢查有無node.js
|
|
|
|
|
|
```
|
|
|
|
|
|
npm -v
|
|
|
|
|
|
```
|
|
|
|
|
|
# React
|
|
|
|
|
|
## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
|
|
|
|
|
|
先下載Node.js 並安裝
|
|
|
|
|
|
|
|
|
|
|
|
於準備開發的資料夾下方開啟CMD
|
|
|
|
|
|
|
|
|
|
|
|
檢查有無node.js
|
|
|
|
|
|
```
|
|
|
|
|
|
npm -v
|
|
|
|
|
|
```
|
