快速入門:使用 Visual Studio 建立您的第一個 Node.js 應用程式

在此5-10 分鐘的 Visual Studio 整合式開發環境 (IDE) 簡介中,您會建立一個簡單的 Node.js web 應用程式。

必要條件

開始之前,請先安裝 Visual Studio 並設定 Node.js 環境。

安裝 Visual Studio 和 Node.js 工作負載

如果您尚未安裝 Visual Studio:

  1. 移至Visual Studio 下載頁面,免費安裝 Visual Studio 2022。

  2. 在 [Visual Studio 安裝程式中,選取 Node.js 開發 工作負載,然後選取 [安裝]。

    螢幕擷取畫面,顯示在 Visual Studio 安裝程式中選取的 Node j 工作負載。

如果您已安裝 Visual Studio。

  1. 在 Visual Studio 中,移至 [工具 > 取得工具及功能]。

  2. 在 [Visual Studio 安裝程式中,選擇 Node.js 開發 工作負載,然後選取 [修改] 以下載並安裝工作負載。

設定您的 Node.js 環境

安裝 Node.js 執行時間的 LTS 版本。 LTS 版本具有與其他架構和程式庫的最佳相容性。

雖然 Node.js 是針對32位和64位架構所建立,但 Node.js 安裝程式一次只支援一個版本。

Visual Studio 通常會偵測到您已安裝的執行時間,但如果沒有,您可以將專案設定為參考已安裝的執行時間:

  1. 建立專案之後,以滑鼠右鍵按一下專案節點。

  2. 選取 [ 屬性],然後設定 Node.exe 路徑。 您可以使用全域 Node.js 安裝,或指定任何 Node.js 專案的本機解譯器路徑。

安裝 Visual Studio

如果您尚未安裝 Visual Studio 2019,請移至Visual Studio 下載頁面,免費進行安裝。

安裝 Visual Studio

如果您尚未安裝 Visual Studio 2017,請前往 Visual Studio 下載頁面免費進行安裝。

設定您的 Node.js 環境

Visual Studio 可協助設定您的環境,包括安裝 Node.js 開發常見的工具。

  1. 在 Visual Studio 中,移至 [工具 > 取得工具及功能]。

  2. 在 [Visual Studio 安裝程式中,選擇 Node.js 開發 工作負載,然後選取 [修改] 以下載並安裝工作負載。

    螢幕擷取畫面,顯示在 Visual Studio 安裝程式中選取的 Node J 工作負載。

  3. 安裝 Node.js 運行時間的 LTS 版本。 我們建議使用 LTS 版本,以取得與外部架構和程式庫的最佳相容性。

    雖然 Node.js 是針對32位和64位架構所建立,但 Node.js 安裝程式一次只支援安裝一個版本。

  4. 如果 Visual Studio 未偵測到您已安裝的執行時間 (通常會) ,請將您的專案設定為參考已安裝的執行時間:

    1. 建立專案之後,以滑鼠右鍵按一下專案節點。

    2. 選取 [ 屬性 ],並設定 Node.exe 路徑。 您可以使用 Node.js 的全域安裝,或指定每個 Node.js 專案中的本機解譯器路徑。

建立您的應用程式專案

在 Visual Studio 中,建立新的 Node.js 專案。

  1. 開始 Visual Studio,然後按下 Esc 鍵關閉 [開始] 視窗。

  2. 按下 Ctrl + Q,然後在搜尋方塊中輸入 node.js

  3. 選取 [ 空白 Node.js Web 應用程式]。

  4. 在對話方塊中,選取 [建立]。

  1. Esc 關閉開始視窗。

  2. Ctrl + Q 開啟 [搜尋] 方塊,然後輸入 Node.js

  3. 選擇 空白 Node.js Web 應用程式 (JavaScript)。 在對話方塊中,選取 [ 建立]。

  1. 從頂端功能表列中 ,選擇 [ 檔案 > 新增 > Project]。

  2. 在 [新增 Project ] 對話方塊的左窗格中,展開 [ JavaScript ],然後選擇 [ Node.js]。

  3. 在中間窗格中,選擇 [ 空白 Node.js Web 應用程式 ],然後選取 [確定]

Visual Studio 建立並開啟專案。 專案的 server.js 檔會在編輯器中開啟。

如果您沒有看到 空白 Node.js Web 應用程式 專案範本,則需要新增 Node.js 開發 工作負載。 如需相關指示,請參閱 必要條件

探索 IDE

Visual Studio 可協助設定您的環境,包括安裝 Node.js 開發常見的工具。

  1. 在右窗格中,查看 方案總管

    • 最上層是 方案,預設的名稱與您的專案相同。 方案 (以磁碟上的 .sln 檔案呈現) 是一或多個相關專案的容器。
    • 您的專案(使用您在設定時所使用的名稱)會以粗體反白顯示。 在磁片上,專案是由專案資料夾中的 >.njsproj 檔案表示。
    • Npm 節點會顯示已安裝的 npm 套件。 您可以用滑鼠右鍵按一下 [ npm ] 節點,以使用對話方塊搜尋和安裝 npm 套件。

    顯示方案總管窗格的螢幕擷取畫面。

  2. 若要從命令提示字元安裝 npm 套件或 Node.js 命令,請以滑鼠右鍵按一下專案節點,然後選擇 [ 在這裡開啟命令提示 字元]。

    顯示 [專案] 內容功能表中 [開啟命令提示字元] 的螢幕擷取畫面。

  3. 若要測試導覽至原始程式碼,請在開啟的 server.js 檔案中,選取 createServer 並按 F12,或按一下滑鼠右鍵, createServer 然後從操作功能表中選取 [ 移至定義 ]。 此命令會帶您前往 createServer HTTP.sys 中的函式定義。

    螢幕擷取畫面,顯示 [createServer] 內容功能表中的 [移至定義]。

  4. 回到 server.js,找出這行程式碼: res.end('Hello World\n'); ,然後將它修改為:

    res.end('Hello World\n' + res.connection.

    當您輸入時 connection. ,IntelliSense 會提供可自動完成程式碼專案的選項。

    顯示 IntelliSense 自動完成選項的螢幕擷取畫面。

  5. 選擇 localPort ,然後輸入 ); 以完成語句:

    res.end('Hello World\n' + res.connection.localPort);

  1. 在右窗格中,查看 方案總管

    • 最上層是 方案,預設的名稱與您的專案相同。 方案 (以磁碟上的 .sln 檔案呈現) 是一或多個相關專案的容器。
    • 您的專案(使用您在設定時所使用的名稱)會以粗體反白顯示。 在磁片上,專案是由專案資料夾中的 >.njsproj 檔案表示。
    • Npm 節點會顯示已安裝的 npm 套件。 您可以用滑鼠右鍵按一下 [ npm ] 節點,以使用對話方塊搜尋和安裝 npm 套件。

    顯示方案總管窗格的螢幕擷取畫面。

  2. 若要從命令提示字元安裝 npm 套件或 Node.js 命令,請以滑鼠右鍵按一下專案節點,然後從內容功能表中選擇 [ 在這裡開啟命令提示 字元]。

    顯示 [專案] 內容功能表中 [開啟命令提示字元] 的螢幕擷取畫面。

  3. 若要測試原始程式碼的導覽,請在開啟的 server.js 檔案中選取 [ createServer ],然後按下 F12 鍵,或從滑鼠右鍵操作功能表選擇 [ 移至定義 ]。 此命令會帶您前往 createServer HTTP.sys 中的函式定義。

    螢幕擷取畫面,顯示 [createServer] 內容功能表中的 [移至定義]。

  4. 回到 server.js,找出這行程式碼: res.end('Hello World\n'); ,然後將它修改為:

    res.end('Hello World\n' + res.connection.

    當您輸入 connection 時,IntelliSense 會提供可自動完成程式碼專案的選項。

    顯示 IntelliSense 自動完成選項的螢幕擷取畫面。

  5. 選擇 [ localPort],然後輸入 ); 以完成語句:

    res.end('Hello World\n' + res.connection.localPort);

執行應用程式

  1. 按下 Ctrl + F5 或選取 [ Debug > 啟動但不進行調試 程式] 來執行應用程式。

    應用程式會在瀏覽器中開啟。

  2. 在瀏覽器中,確認您看到 Hello World 訊息和本機埠號碼。

恭喜! 您已使用 Visual Studio 建立簡單的 Node.js 應用程式。 若要深入瞭解,請繼續閱讀目錄的 [ 教學 課程] 區段。

下一步