設定 Node 開發環境

Node 和 Express 使得在您的計算機上設定開發 Web 應用程式變得非常容易。本節概述了所需工具，解釋了在 Ubuntu、macOS 和 Windows 上安裝 Node (以及 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 版本——較新的版本包含錯誤修復、對更新版本的 ECMAScript (JavaScript) 標準的支援，以及對 Node API 的改進。

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

對於 Express，您應該始終使用最新版本。

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

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

Windows 上有很多 Node 版本管理器。這裡我們使用 nvm-windows，它在 Node 開發人員中享有很高的聲譽。

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

nvm install lts

在撰寫本文時，nodejs 的 LTS 版本為 20.11.0。您可以使用以下命令將其設定為 當前版本

nvm use 20.11.0

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

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

安裝 nvm 後，開啟一個終端，輸入以下命令以下載最新版本的 nodejs 和 npm

nvm install --lts

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

nvm use 20.11.0

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

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

> node -v
v20.11.0

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

> npm -v
10.2.4

作為更有趣的測試，讓我們建立一個非常基本的“純 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”。

除了 Node 本身之外，npm 是用於處理 Node 應用程式的最重要工具。npm 用於獲取應用程式開發、測試和/或生產所需的所有包（JavaScript 庫），並且還可用於執行開發過程中使用的測試和工具。

您可以手動使用 npm 分別獲取每個需要的包。通常，我們使用名為 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",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   

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": "^4.17.1"
     }
   }
   

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 程式碼質量檢查工具 ESLint，您可以像下面這樣呼叫 npm

npm install eslint --save-dev

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

  "devDependencies": {
    "eslint": "^7.10.0"
  }

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

例如，要定義一個指令碼以執行我們在上一節中指定的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 應用程式 "框架"。使用 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\expresstests\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)
• 使用 Node.js 與 Windows 子系統 Linux (docs.microsoft.com)

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