2.9 KiB
2.9 KiB
Node.js 與 npm 簡介
Node.js 是什麼？
Node.js 是一個 不需要開啟網頁就能執行 JavaScript 的環境，讓 JavaScript 可以在 伺服器端運行，而不只是瀏覽器內使用。
npm（Node Package Manager）是什麼？
npm 是 Node.js 內建的套件管理工具，類似於 pip（Python）或 NuGet（C#）。
它的主要用途包括：
- 管理 JavaScript 套件（安裝、更新、移除）
- 處理前端與後端的開發依賴
- 自動化開發工作（如打包、測試、部署）
相關npm指令:
npm install
npm run dev
npm install package --save
如果安裝套件時沒有加 --save，套件只會安裝在 node_modules，但不會記錄在 package.json。這樣當別人 git clone 專案並執行 npm install 時，該套件就不會自動安裝，導致缺少依賴。
為什麼使用 React 仍然需要 npm？
npm 本身是 JavaScript 寫成的工具，需要 Node.js 在背景執行來處理指令。
雖然 React 只負責前端開發，不會用到 Node.js，但仍然需要 npm 來安裝開發工具與相關套件。
開發 React 項目時，常見的 npm 套件如下：
常用 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 官網（建議下載 LTS 版本）
2. 在Vscode終端檢查安裝是否成功
node -v # 檢查 Node.js 版本
npm -v # 檢查 npm 版本
3. 如果遇到無法使用npm指令?
a.在「開始功能表」搜尋 PowerShell
b.右鍵「以系統管理員身份執行」
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Y
Vite
什麼是 Vite？
Vite 是一個 現代化的前端開發工具，主要用於快速建立與運行 React、Vue、Svelte、Solid.js 等前端框架。
它的核心目標是 提供極速的開發體驗，比傳統的 Webpack 快 10 倍以上。
使用Vite創建專案
React（JavaScript）
npm create vite@latest my-react-app --template react
React（TypeScript）
npm create vite@latest my-react-app --template react-ts
Vue 3（JavaScript）
npm create vite@latest my-vue-app --template vue
Vue 3（TypeScript）
npm create vite@latest my-vue-app --template vue-ts