設定 Node 開發環境

Express 開發環境概述

Node 和 Express 使設定你的計算機以開始開發 Web 應用程式變得非常容易。本節概述了所需的工具，解釋了在 Ubuntu、macOS 和 Windows 上安裝 Node（和 Express）的一些最簡單的方法，並展示瞭如何測試你的安裝。

什麼是 Express 開發環境？

Express 開發環境包括在你本地計算機上安裝 Nodejs、npm 包管理器 和（可選的）Express 應用程式生成器。

Node 和 npm 包管理器透過預編譯的二進位制包、安裝程式、作業系統包管理器或從原始碼（如下節所示）一起安裝。然後，Express 透過 npm 作為你的各個 Express Web 應用程式的依賴項（以及其他庫，如模板引擎、資料庫驅動程式、身份驗證中介軟體、用於提供靜態檔案的中介軟體等）進行安裝。

npm 還可以用於（全域性）安裝 Express 應用程式生成器，這是一個方便的工具，用於建立遵循 MVC 模式的骨架 Express Web 應用程式。應用程式生成器是可選的，因為你不需要使用此工具來建立使用 Express 的應用程式，或者構建具有相同架構佈局或依賴項的 Express 應用程式。但是，我們將使用它，因為它使入門變得更容易，並促進了模組化的應用程式結構。

典型的開發環境中還有其他外圍工具，包括用於編輯程式碼的文字編輯器或 IDE，以及用於安全管理程式碼不同版本的Git 等原始碼管理工具。我們假設你已經安裝了這些型別的工具（特別是文字編輯器）。

支援哪些作業系統？

Node 可以在 Windows、macOS、多種 Linux 發行版、Docker 等上執行。Node.js 下載頁面上有完整列表。幾乎任何個人電腦都應該具備在開發過程中執行 Node 所需的效能。Express 在 Node 環境中執行，因此可以在任何執行 Node 的平臺上執行。

本文提供了 Windows、macOS 和 Ubuntu Linux 的設定說明。

你應該使用哪個版本的 Node/Express？

Node 有許多版本——較新的版本包含錯誤修復、支援最新版本的 ECMAScript (JavaScript) 標準，以及 Node API 的改進。

通常你應該使用最新的 LTS（長期支援） 版本，因為它會比“當前”版本更穩定，同時仍然具有相對較新的功能（並且仍在積極維護中）。如果你需要 LTS 版本中不存在的功能，則應該使用 Current 版本。

對於 Express，你應該使用 Node 的最新 LTS 版本。

資料庫和其他依賴項呢？

其他依賴項，例如資料庫驅動程式、模板引擎、身份驗證引擎等，是應用程式的一部分，並使用 npm 包管理器匯入到應用程式環境中。我們將在以後的特定於應用程式的文章中討論它們。

安裝 Node

為了使用 Express，你必須在你的作業系統上安裝 Nodejs 和 Node 包管理器 (npm)。為了簡化此過程，我們將首先安裝一個 Node 版本管理器，然後使用它來安裝最新長期支援 (LTS) 版本的 Node 和 npm。

Windows

Windows 有許多 Node 版本管理器。這裡我們使用 nvm-windows，它在 Node 開發者中備受推崇。

從 nvm-windows/releases 頁面使用你選擇的安裝程式安裝最新版本。nvm-windows 安裝完成後，開啟命令提示符（或 PowerShell）並輸入以下命令以下載最新 LTS 版本的 Nodejs 和 npm

nvm install lts

在撰寫本文時，Nodejs 的 LTS 版本是 22.17.0。你可以使用以下命令將其設定為要使用的當前版本

nvm use 22.17.0

使用命令 nvm --help 查詢其他命令列選項，例如列出所有可用的 Node 版本和所有已下載的 NVM 版本。

Ubuntu 和 macOS

Ubuntu 和 macOS 有許多 Node 版本管理器。nvm 是其中一個更受歡迎的，並且是 nvm-windows 所基於的原始版本。請參閱 nvm > 安裝和更新指令碼以獲取在終端中安裝最新版 nvm 的說明。

nvm 安裝完成後，開啟終端並輸入以下命令以下載最新 LTS 版本的 Nodejs 和 npm

nvm install --lts

在撰寫本文時，Nodejs 的 LTS 版本是 22.17.0。命令 nvm list 顯示已下載的版本集和當前版本。你可以使用以下命令將特定版本設定為當前版本（與 nvm-windows 相同）

nvm use 22.17.0

使用命令 nvm --help 查詢其他命令列選項。這些選項通常與 nvm-windows 提供的選項相似或相同。

測試你的 Nodejs 和 npm 安裝

一旦你將 nvm 設定為使用特定的 Node 版本，你就可以測試安裝了。一個很好的方法是在終端/命令提示符中使用“version”命令，並檢查是否返回了預期的版本字串

> node -v
v22.17.0

Nodejs 包管理器 npm 也應該已經安裝，並且可以用相同的方式進行測試

> npm -v
10.9.2

作為一個稍微更有趣的測試，讓我們建立一個非常基本的“純 Node”伺服器，當你訪問瀏覽器中的正確 URL 時，它會在瀏覽器中列印“Hello World”

1. 將以下文字複製到一個名為 hellonode.js 的檔案中。這使用純 Node 功能（不包含 Express 的任何內容）

   js

   // Load HTTP module
   const http = require("http");
   
   const hostname = "127.0.0.1";
   const port = 3000;
   
   // Create HTTP server and listen on port 3000 for requests
   const server = http.createServer((req, res) => {
     // Set the response HTTP header with HTTP status and Content type
     res.statusCode = 200;
     res.setHeader("Content-Type", "text/plain");
     res.end("Hello World\n");
   });
   
   // Listen for request on port 3000, and as a callback function have the port listened on logged
   server.listen(port, hostname, () => {
     console.log(`Server running at http://${hostname}:${port}/`);
   });
   

   程式碼匯入了“http”模組，並使用它建立了一個伺服器（createServer()），該伺服器在埠 3000 上監聽 HTTP 請求。然後，指令碼會向控制檯列印一條訊息，說明你可以使用哪個瀏覽器 URL 來測試伺服器。createServer() 函式接受一個回撥函式作為引數，該函式將在收到 HTTP 請求時呼叫——它返回一個 HTTP 狀態碼為 200（“OK”）和純文字“Hello World”的響應。

   注意：如果現在還不完全理解這段程式碼在做什麼，也不用擔心！我們將在開始使用 Express 後更詳細地解釋我們的程式碼！

2. 透過在命令提示符中導航到與 hellonode.js 檔案相同的目錄，並呼叫 node 以及指令碼名稱來啟動伺服器，如下所示

   bash

   node hellonode.js
   

   伺服器啟動後，你將看到控制檯輸出，指示伺服器執行的 IP 地址

   Server running at http://127.0.0.1:3000/
   

3. 導航到 URL http://127.0.0.1:3000。如果一切正常，瀏覽器應該顯示字串“Hello World”。

使用 npm

除了 Node 本身，npm 是使用 Node 應用程式最重要的工具。npm 用於獲取應用程式開發、測試和/或生產所需的任何包（JavaScript 庫），也可以用於執行開發過程中使用的測試和工具。

你可以手動使用 npm 單獨獲取每個所需的包。通常，我們 instead 使用名為 package.json 的純文字定義檔案來管理依賴項。此檔案列出了特定 JavaScript“包”的所有依賴項，包括包的名稱、版本、描述、要執行的初始檔案、生產依賴項、開發依賴項、可以使用的 Node 版本等。package.json 檔案應包含 npm 獲取和執行你的應用程式所需的一切（如果你正在編寫一個可重用庫，你可以使用此定義將你的包上傳到 npm 倉庫並供其他使用者使用）。

新增依賴項

以下步驟展示瞭如何使用 npm 下載包，將其儲存到專案依賴項中，然後在 Node 應用程式中引用它。

1. 首先為你的新應用程式建立一個目錄並導航到它

   bash

   mkdir myapp
   cd myapp
   

2. 使用 npm init 命令為你的應用程式建立 package.json 檔案。此命令會提示你輸入許多資訊，包括應用程式的名稱和版本以及初始入口檔案（預設為 index.js）的名稱。現在，只需接受預設值即可

   bash

   npm init
   

   如果你顯示 package.json 檔案 (cat package.json)，你將看到你接受的預設值，以許可證結尾。

   json

   {
     "name": "myapp",
     "version": "1.0.0",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "description": ""
   }
   

3. 現在在 myapp 目錄中安裝 Express，並將其儲存在你的 package.json 檔案的依賴項列表中

   bash

   npm install express
   

   你的 package.json 的依賴項部分現在將出現在 package.json 檔案的末尾，並將包含 Express。

   json

   {
     "name": "myapp",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "dependencies": {
       "express": "^5.1.0"
     }
   }
   

4. 要使用 Express 庫，你需要在 index.js 檔案中呼叫 require() 函式以將其包含在你的應用程式中。現在在“myapp”應用程式目錄的根目錄中建立此檔案，併為其提供以下內容

   js

   const express = require("express");
   
   const app = express();
   const port = 3000;
   
   app.get("/", (req, res) => {
     res.send("Hello World!");
   });
   
   app.listen(port, () => {
     console.log(`Example app listening on port ${port}!`);
   });
   

   這段程式碼展示了一個最小的“HelloWorld”Express Web 應用程式。它使用 require() 匯入“express”模組，並用它來建立一個伺服器（app），該伺服器在埠 3000 上監聽 HTTP 請求，並向控制檯列印一條訊息，解釋你可以使用哪個瀏覽器 URL 來測試伺服器。app.get() 函式只響應帶有指定 URL 路徑 ('/') 的 HTTP GET 請求，在這種情況下，它會呼叫一個函式來發送我們的 Hello World! 訊息。

   注意：`Example app listening on port ${port}!` 中的反引號允許我們將 $port 的值插入到字串中。

5. 你可以透過在命令提示符中呼叫帶有指令碼的 Node 來啟動伺服器

   bash

   node index.js
   

   你將看到以下控制檯輸出

   Example app listening on port 3000
   

6. 導航到 URL https://:3000/。如果一切正常，瀏覽器應該顯示字串“Hello World!”。

開發依賴項

如果依賴項僅在開發期間使用，則應將其儲存為“開發依賴項”（這樣你的包使用者在生產環境中就不必安裝它）。例如，要使用流行的 JavaScript Linting 工具 ESLint，你可以按如下方式呼叫 npm

npm install eslint --save-dev

然後，以下條目將新增到你的應用程式的 package.json 中

{
  "devDependencies": {
    "eslint": "^9.30.1"
  }
}

執行任務

除了定義和獲取依賴項之外，你還可以在 package.json 檔案中定義命名指令碼，並呼叫 npm 使用 run-script 命令執行它們。這種方法通常用於自動化執行測試和開發或構建工具鏈的一部分（例如，執行工具來縮小 JavaScript、壓縮影像、LINT/分析你的程式碼等）。

例如，要定義一個指令碼來執行我們在上一節中指定的 eslint 開發依賴項，我們可以將以下指令碼塊新增到我們的 package.json 檔案中（假設我們的應用程式原始碼在資料夾 /src/js 中）

{
  "scripts": {
    // …
    "lint": "eslint src/js"
    // …
  }
}

進一步解釋一下，eslint src/js 是我們可以在終端/命令列中輸入的命令，用於對應用程式目錄中 src/js 目錄下的 JavaScript 檔案執行 eslint。將上述內容包含在應用程式的 package.json 檔案中，為該命令 lint 提供了一個快捷方式。

然後我們可以透過呼叫 npm 來執行 eslint

npm run-script lint
# OR (using the alias)
npm run lint

這個示例可能看起來並不比原始命令短，但你可以在 npm 指令碼中包含更大的命令，包括多個命令鏈。你可以識別一個 npm 指令碼，一次執行所有測試。

安裝 Express 應用程式生成器

Express 應用程式生成器工具生成一個 Express 應用程式“骨架”。使用 npm 安裝生成器，如下所示

npm install express-generator -g

要使用預設設定建立名為“helloworld”的 Express 應用程式，請導航到要建立它的位置並按如下方式執行該應用程式

express helloworld

npx express-generator helloworld

你還可以指定要使用的模板庫和許多其他設定。使用 help 命令檢視所有選項

express --help

生成器將在你當前位置的子資料夾中建立新的 Express 應用程式，並在控制檯上顯示構建進度。完成後，該工具將顯示你需要輸入的命令以安裝 Node 依賴項並啟動應用程式。

新應用程式的根目錄中將有一個 package.json 檔案。你可以開啟它檢視安裝了哪些依賴項，包括 Express 和模板庫 Jade

{
  "name": "helloworld",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

使用 npm 安裝 helloworld 應用程式的所有依賴項，如下所示

cd helloworld
npm install

然後執行應用程式（Windows 和 Linux/macOS 的命令略有不同），如下所示

# Run helloworld on Windows with Command Prompt
SET DEBUG=helloworld:* & npm start

# Run helloworld on Windows with PowerShell
SET DEBUG=helloworld:* | npm start

# Run helloworld on Linux/macOS
DEBUG=helloworld:* npm start

DEBUG 命令會建立有用的日誌記錄，導致如下輸出

>SET DEBUG=helloworld:* & npm start

> helloworld@0.0.0 start D:\GitHub\express-tests\helloworld
> node ./bin/www

  helloworld:server Listening on port 3000 +0ms

開啟瀏覽器並導航到 https://:3000/ 以檢視預設的 Express 歡迎頁面。

當我們撰寫生成骨架應用程式的文章時，我們將更多地討論生成的應用程式。

總結

你現在已經擁有一個在你的計算機上執行的 Node 開發環境，可以用於建立 Express Web 應用程式。你還了解了如何使用 npm 將 Express 匯入應用程式，以及如何使用 Express 應用程式生成器工具建立應用程式並執行它們。

在下一篇文章中，我們將開始透過教程使用此環境和相關工具構建一個完整的 Web 應用程式。

另見

• 下載頁面 (nodejs.org)
• 安裝 Express (expressjs.com)
• Express 應用程式生成器 (expressjs.com)
• 在 Windows Subsystem for Linux 中使用 Node.js (docs.microsoft.com)

• 上一頁
• 概述：Express Web 框架 (Node.js/JavaScript)
• 下一頁