※ Express 專案初始化標準動作：
※ Node.js 環境建置核對
- 安裝node.js, npm（Node.js的套件管理系統）：
安裝 Node.js 的方式除了可以直接從 Node.js 的官方網站 https://nodejs.org 下載安裝外，在實務開發上更常使用的是 Node Version Manager (nvm)。
使用 nvm 的好處在於，它讓開發者可以在電腦上同時安裝並切換不同版本的 Node.js。這對於處理多個專案時非常有用，因為不同專案可能需要不同的 Node.js 版本。使用 nvm，你可以方便地切換版本，避免因版本不一致導致的錯誤。而如果不使用 nvm，而是直接從官網下載 Node.js，你將無法輕鬆切換版本，處理不同專案時可能會遇到許多麻煩。nvm 可以減少重複安裝和移除的麻煩，使開發更順利。
- 安裝Visual studio code
※ Windows 安裝 nvm
- nvm 可至 nvm-windows 的 github 下載。點擊「Download Now」後就到了下載頁面。
安裝完成後，打開終端機。如果原本終端機已經打開了，記得關掉重新開啟。打開後輸入下述指令以確定安裝成功：
nvm version//確認是否安裝nvm
1.1.11
※ 以 nvm 安裝 Node.js
nvm install node //安裝最新的穩定版本的 Node.js
在終端機中輸入 node -v 來檢查看看是不是當前的 Node.js 版本：
node -v //確認是否安裝node.js或版本資訊
v14.16.0
在終端機中輸入 npm -v來檢查看看是不是當前的npm 版本：
npm -v //確認是否安裝npm或版本資訊
6.14.11
※ Windows 安裝程式碼編輯器 (text editor) - Visual Studio Code
- Installation：請前往 https://code.visualstudio.com/ 並依照你的作業系統下載適合的版本。
※ Visual Studio Code – 客製化編輯設定
在這裡我們要開啟設定檔再做四個編輯設定：
- tab size：按下 TAB 鍵時空兩格。
- word wrap：程式碼長度超過視窗時，可以自動換行。
- format on save：按下存檔時，自動校訂程式碼格式。
- format on paste：貼上程式碼時，自動校訂貼進來的程式碼的格式。
※ Visual Studio Code – 常用安裝相應的套件設定
- Chinese (Traditional) Language Pack for Visual Studio Code：中文化 VScode。
- Code Spell Checker：可以檢查程式碼有沒有拼錯字。
- TODO Highlight：將特殊的關鍵字如 TODO 、 FIXME 畫上亮色，讓註解以不同顏色來區隔。
- Atom One Dark Theme：將編輯器改為深色背景，程式碼也畫上不同顏色。
- vscode-icons / Material Icon Theme：美化檔案的 icon，讓不同檔案變得更容易辨識。
※ Express 專案步驟筆記清單
- 在C槽新增空白專案資料夾：
- 打開終端機（Terminal），建立一個新資料夾，然後進入這個資料夾中。
mkdir {資料夾名稱}//建立一個新資料夾
- 進入這個資料夾，使用 cd 指令再加上目錄名稱。
cd {資料夾名稱}
- 安裝 Experss 到專案中：
- 設定 package.json。
npm init -y //建立 package.json 檔，用來登記所有的外部套件。
- 安裝 Experss：
- 專案資料夾中多了一個 node_modules 的資料夾，npm 會把所有安裝下來的套件放在這個資料夾中。
- 資料夾中還多了一支名字與 package.json 相似，名為 package-lock.json 的檔案。這支檔案會詳細記錄每一次我們使用 npm 安裝了什麼。
npm install express // npm i express 都可以
npm install 套件名稱@版本號//下載指定版本@[4.17.1]
- 在 Express 專案資料夾中建立一支名為
app.js的檔案。
- 設定程式入口為 app.js。
在設定檔裡有一個 main 屬性，這個是指程式的入口檔案，預設叫做 index.js，但我們習慣上會把這支入口檔案命名為 app.js。所以現在手動更改一下：
- 設定主程式 app.js：
// 載入 express 並建構應用程式伺服器
const express = require('express')
const app = express()
// 設定首頁路由
app.get('/', (req, res) => {
res.send('hello world')
})
// 設定 port 3000
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 啟動應用程式伺服器：
node app.js
express app listen on port 3000//印出
- 用瀏覽器打開網址
localhost:3000/
- 安裝 nodemon：會自動重啟伺服器，重新整理瀏覽器後，就可以看到修改後的畫面。
npm install -g nodemon //-g表示把 nodemon 這個套件安裝在電腦的全域（global）。
- 使用 nodemon來啟動 Express 的專案：
$ nodemon app.js
[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
express app listen on port 3000
- 定義開發用腳本：
// 修改 package.json
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
- 只要用 npm run 加上腳本，就可以執行內容，例如：
npm run start→取代node app.jsnpm run dev→ 取代nodemon app.js
$ npm run dev
> express-app@1.0.0 dev C:\Users\user\express-app
> nodemon app.js
[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
express app listen on port 3000
- 設定版本控制：
- 初始化 Git，把專案登錄到版本控制系統裡。
$ git init- 設定 .gitignore：
# OS X
.DS_Store*
Icon?
._*
# Windows
Thumbs.db
ehthumbs.db
Desktop.ini
# npm
node_modules
*.log
*.gz
- 建立第一筆 commit：
git init //專案初始化
git add .
git commit -m "feat: project init"
