教學課程：適用於初學者的 Node.js

發行項
03/11/2024

如果您是使用 Node.js 的新手，本指南將透過一些基本概念來協助您開始使用。

嘗試在 Visual Studio Code 中使用 Node.js
使用 Express 建立您的第一個 Node.js Web 應用程式
嘗試使用 Node.js 模組

必要條件

在 Windows 上或 Windows 子系統 Linux 版上安裝 Node.js

使用 Visual Studio Code 嘗試 NodeJS

如果您尚未安裝 Visual Studio Code，請返回上述必要條件一節，並遵循連結至 Windows 或 WSL 的安裝步驟。

開啟命令列並建立新的目錄：mkdir HelloNode，然後輸入目錄：cd HelloNode
建立名為 "app.js" 的 JavaScript 檔案，並在其中包含名為 "msg" 的變數：echo var msg > app.js
在 VS Code 中使用下列命令開啟目錄和您的 app.js 檔案：code .
新增簡單的字串變數 ("Hello World")，然後在您的 "app.js" 檔案中輸入此字串，以將字串的內容傳送至您的主控台：
```
var msg = 'Hello World';
console.log(msg);
```
使用 Node.js 執行 "app.js" 檔案。選取 [檢視]>[終端機] (或選取 Ctrl+`，使用倒單引號字元)，在 VS Code 內開啟您的終端機。如果您需要變更預設終端機，選取下拉式功能表，然後選擇 [選取預設殼層]。
在終端機中輸入：node app.js。您應該會看到輸出："Hello World"。

注意

請注意，當您在 'app.js' 檔案中輸入 console 時，VS Code 會顯示與 console 物件相關的支援選項，讓您可以選擇使用 IntelliSense。使用其他 JavaScript 物件 \(翻譯不完整\) 嘗試利用 Intellisense 進行實驗。

使用 Express 建立您的第一個 NodeJS Web 應用程式

Express 是有彈性且有效率的最小 Node.js 架構，可讓您更輕鬆地開發 Web 應用程式，以處理多種類型的要求，例如 GET、PUT、POST 和 DELETE。 Express 隨附一個應用程式產生器，可自動為您的應用程式建立檔案架構。

使用 Express.js 建立專案：

開啟命令列 (命令提示字元、Powershell 或任何您慣用的方式)。
建立新專案資料夾：mkdir ExpressProjects，並進入該目錄：cd ExpressProjects
使用 Express 建立 HelloWorld 專案範本：npx express-generator HelloWorld --view=pug

注意

我們在此處使用 npx 命令來執行 Express.js Node 套件，而不需實際加以安裝 (或根據您的想法暫時安裝)。如果您嘗試使用 express 命令，或使用 express --version 來檢查已安裝的 Express 版本，您將會收到「找不到 Express」的回應。如果您想要全域安裝 Express 以便重複使用，請使用：npm install -g express-generator。您可以使用 npm list，來檢視 npm 已安裝的套件清單。其將依深度列出 (巢狀目錄的深度數)。您安裝的套件將位於深度 0。該套件的相依性將位於深度 1、進一步的相依性將位於深度 2，依此類推。若要深入了解，請參閱 StackOverflow 上的 npx 與 npm 之間的差異？ (英文)。
使用下列命令，在 VS Code 中開啟專案，以檢查 Express 所包含的檔案和資料夾：code .

Express 所產生的檔案將建立一個 Web 應用程式，其使用的架構乍看之下可能讓人有點不知所措。您將在 VS Code 的 [Explorer] 視窗看到 (Ctrl+Shift+E 來檢視) 已產生下列檔案和資料夾：
- bin. 包含啟動應用程式的可執行檔。其會引發伺服器 (如果未提供替代方法，則在連接埠 3000 上)，並設定基本錯誤處理。
- public. 包含所有公開存取的檔案，包括 JavaScript 檔案、CSS 樣式表、字型檔案、影像，以及使用者連線到您的網站時所需的任何其他資產。
- routes. 包含應用程式的所有路由處理常式。系統會在此資料夾中自動產生兩個檔案 (index.js 和 users.js)，以作為如何分隔應用程式路由設定的範例。
- views. 包含您的範本引擎所使用的檔案。 Express 已設定為在呼叫轉譯方法時，在這裡尋找相符的檢視。預設範本引擎為 Jade，但建議使用 Pug 而非 Jade，因此我們使用了 --view 旗標來變更檢視 (範本) 引擎。您可以使用 express --help，來檢視 --view 旗標選項及其他項目。
- app.js. 應用程式的起點。它會載入一切並開始服務使用者要求。其基本上就是將各個部分保存在一起的黏著劑。
- package.json. 包含專案描述、指令碼管理員及應用程式資訊清單。其主要用途是追蹤您應用程式的相依性及其各自版本。
您現在必須安裝 Express 用來建置及執行 HelloWorld Express 應用程式的相依性 (針對執行伺服器等工作所使用的套件，如 package.json 檔案中所定義)。在 VS Code 中，選取 [檢視]>[終端機] (或選取 Ctrl + '，使用倒單引號字元) 來開啟終端機，確定您仍位於 'HelloWorld' 專案目錄中。使用下列命令來安裝 Express 套件相依性：
```
npm install
```
此時，您已為多頁 Web 應用程式設定了架構，以存取各種不同的 API 和 HTTP 公用程式方法及中介軟體，讓您更能夠輕鬆地建立強固的 API。在虛擬伺服器上，輸入下列命令來啟動 Express 應用程式：
```
npx cross-env DEBUG=HelloWorld:* npm start
```
提示

上述命令的 DEBUG=myapp:* 部分表示您告知 Node.js，您想要基於偵錯目的開啟記錄功能。請記得以您的應用程式名稱取代 'myapp'。您可以在 package.json 檔案中，於 "name" 屬性下方找到您的應用程式名稱。使用 npx cross-env 會在任何終端機中設定 DEBUG 環境變數，但您也可以使用終端機特定的方式進行設定。 npm start 命令告知 npm，在您的 package.json 檔案中執行指令碼。
您現在可以開啟網頁瀏覽器並前往 localhost:3000，以檢視執行中的應用程式。
現在您的 HelloWorld Express 應用程式正在瀏覽器中本機執行，請嘗試在您的專案目錄中開啟 [檢視] 資料夾，然後選取 'index.pug' 檔案來進行變更。開啟之後，將 h1= title 變更為 h1= "Hello World!"，然後選取 [儲存] (Ctrl+S)。在網頁瀏覽器上重新整理 localhost:3000 URL，以檢視您的變更。
若要停止執行 Express 應用程式，請在終端機中輸入：Ctrl+C

嘗試使用 Node.js 模組

Node.js 提供工具以協助您開發伺服器端 Web 應用程式，部分為內建工具，但可透過 npm 取得更多工具。這些模組可協助執行許多工作：

工具	用於
gm、sharp	影像操作，包括編輯、調整大小、壓縮等，直接在您的 JavaScript 程式碼中進行
PDFKit	產生 PDF
validator.js	字串驗證
imagemin、UglifyJS2	縮小尺寸
spritesmith	產生原件工作表
winston	記錄
commander.js	建立命令列應用程式

讓我們使用內建的 OS 模組來取得有關電腦作業系統的一些資訊：

在您的命令列中，開啟 Node.js CLI。輸入 node 之後，您將會看到 > 提示，如此就能知道您使用的是 Node.js
若要識別您目前正在使用的作業系統 (這應該會傳回回應，讓您知道您位於 Windows 上)，輸入：os.platform()
若要檢查您的 CPU 架構，輸入：os.arch()
若要檢視您系統上可用的 CPU，輸入：os.cpus()
輸入 .exit 或選取 Ctrl+C 兩次，即可離開 Node.js CLI。

提示

您可以使用 Node.js OS 模組來執行檢查平台並傳回平台特定變數等動作：針對 Windows 開發為 Win32/.bat，針對 Mac/unix、Linux、SunOS 為 darwin/.sh，依此類推 (例如，var isWin = process.platform === "win32";)。

共用方式為

教學課程：適用於初學者的 Node.js

必要條件

使用 Visual Studio Code 嘗試 NodeJS

使用 Express 建立您的第一個 NodeJS Web 應用程式

嘗試使用 Node.js 模組

意見反應

其他資源