快速入門:使用 Visual Studio 建立您的第一個 Node.js 應用程式Quickstart: Use Visual Studio to create your first Node.js app

在這個 5-10 分鐘的 Visual Studio 整合式開發環境 (IDE) 簡介中,您將建立簡單的 Node.js Web 應用程式。In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create a simple Node.js web application.

PrerequisitesPrerequisites

  • 您必須安裝 Visual Studio 和 Node.js 開發工作負載。You must have Visual Studio installed and the Node.js development workload.

    如果您尚未安裝 Visual Studio 2019,請移至 Visual Studio 下載   頁面,免費進行安裝。If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

    如果您尚未安裝 Visual Studio 2017,請移至 Visual Studio 下載   頁面,免費進行安裝。If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

    如果您需要安裝工作負載,但已有 Visual Studio,請移至 [工具 > 取得工具和功能],這會開啟 Visual Studio 安裝程式。If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features..., which opens the Visual Studio Installer. 選擇 [Node.js 開發]**** 工作負載,然後選擇 [修改]****。Choose the Node.js development workload, then choose Modify.

    VS 安裝程式中的 Node.js 工作負載

  • 您必須安裝 Node.js 執行階段。You must have the Node.js runtime installed.

    如果您沒有安裝它,建議您從 Node.js 網站安裝 LTS 版本,以提供與外部架構和程式庫的最佳相容性。If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries. Node.js 是針對32位和64位架構所建立。Node.js is built for 32-bit and 64-bit architectures. Visual Studio 中的 Node.js 工具(包含在 Node.js 工作負載中)支援兩種版本。The Node.js tools in Visual Studio, included in the Node.js workload, support both versions. 只有一個是必要的,而且 Node.js 安裝程式只支援一次安裝一個。Only one is required and the Node.js installer only supports one being installed at a time.

    一般而言,Visual Studio 會自動偵測已安裝的 Node.js 執行階段。In general, Visual Studio automatically detects the installed Node.js runtime. 如果未偵測到已安裝的執行時間,您可以在建立專案之後,將專案設定為參考已安裝的執行時間 (在專案節點上按一下滑鼠右鍵,選擇 [ 屬性],然後設定 Node.exe 路徑) 。If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path). 您可以使用 Node.js 的全域安裝,也可以在每個 Node.js 專案中指定本機解譯器的路徑。You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

建立專案Create a project

首先,您將建立 Node.js Web 應用程式專案。First, you'll create an Node.js web application project.

  1. 如果您尚未安裝 Node.js 執行階段,請從 Node.js 網站安裝 LTS 版本。If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

    如需詳細資訊,請參閱必要條件。For more information, see the prerequisites.

  2. 開啟 Visual Studio。Open Visual Studio.

  3. 建立新專案。Create a new project.

    Esc 關閉開始視窗。Press Esc to close the start window. 鍵入 Ctrl + Q 開啟 [搜尋] 方塊,鍵入 Node.js,然後選擇 [Create new Blank Node.js Web application project] (建立新的空白 Node.js Web 應用程式專案)**** (JavaScript)。Type Ctrl + Q to open the search box, type Node.js, then choose Create new Blank Node.js Web application project (JavaScript). 在出現的對話方塊中選擇 [建立]****。In the dialog box that appears, choose Create.

    從頂端功能表列中 ,選擇 [ 檔案 > 新增 > 專案]。From the top menu bar, choose File > New > Project. 在 [新增專案]**** 對話方塊的左窗格中,展開 JavaScript,然後選擇 Node.jsIn the left pane of the New Project dialog box, expand JavaScript, then choose Node.js. 在中間窗格中,選擇 [Blank Node.js Web application] (空白的 Node.js Web 應用程式)****,然後選擇 [確定]****。In the middle pane, choose Blank Node.js Web application, then choose OK.

    如果您看不到 [空白的 Node.js Web 應用程式]**** 專案範本,則必須新增 Node.js 開發工作負載。If you don't see the Blank Node.js Web application project template, you must add the Node.js development workload. 如需詳細指示,請參閱必要條件For detailed instructions, see the Prerequisites.

    Visual Studio 會建立新的方案並開啟專案。Visual Studio creates and the new solution and opens the project. server.js 會在左窗格的編輯器中開啟。server.js opens in the editor in the left pane.

探索 IDEExplore the IDE

  1. 查看方案總管**** 的右窗格。Take a look at Solution Explorer in the right pane.

    方案總管

    • 以粗體反白顯示的項目就是您的專案,並使用您在 [新增專案]**** 對話方塊中所指定的名稱。Highlighted in bold is your project, using the name you gave in the New Project dialog box. 在磁片上,此專案是由專案資料夾中的 >.njsproj 檔案表示。On disk, this project is represented by a .njsproj file in your project folder.

    • 最上層是方案,預設其名稱會與專案相同。At the top level is a solution, which by default has the same name as your project. 方案 (以磁碟上的 .sln 檔案呈現) 是一或多個相關專案的容器。A solution, represented by a .sln file on disk, is a container for one or more related projects.

    • npm 節點會顯示任何已安裝的 npm 套件。The npm node shows any installed npm packages. 您可以使用滑鼠右鍵按一下 npm 節點,以使用對話方塊來搜尋並安裝 npm 套件。You can right-click the npm node to search for and install npm packages using a dialog box.

  2. 如果您想要從命令提示字元安裝 npm 套件或 Node.js 命令,請以滑鼠右鍵按一下專案節點,然後選擇 [ 在這裡開啟命令提示字元]。If you want to install npm packages or Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

    Node.js 命令提示字元

  3. 在編輯器 (左窗格) 的 server.js 檔案中,選擇 http.createServer,然後按 F12,或選擇操作 (右鍵) 功能表中的 [移至定義]****。In the server.js file in the editor (left pane), choose http.createServer and then press F12 or choose Go To Definition from the context (right-click) menu. 此命令會將您帶到在 node.js createServer . ts中的函式定義。This command takes you to the definition of the createServer function in index.d.ts.

    移至定義操作功能表

  4. 移回至 server.js,然後將游標置於 res.end('Hello World\n'); 這行程式碼的字串結尾,並進行修改,讓它看起來如下:Got back to server.js, then put your cursor at the end of the string in this line of code, res.end('Hello World\n');, and modify it so that it looks like this:

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

    如果您鍵入 connection.,則 IntelliSense 會提供自動完成程式碼項目的選項。Where you type connection., IntelliSense provides options to auto-complete the code entry.

    IntelliSense 自動完成

  5. 選擇 [localPort]****,然後鍵入 ); 以完成陳述式,讓它看起來如下:Choose localPort, and then type ); to complete the statement so that it looks like this:

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

執行應用程式Run the application

  1. 按下Ctrl + F5 (或Debug > 啟動但不) 調試程式來執行應用程式。Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. 應用程式會在瀏覽器中開啟。The app opens in a browser.

  2. 在瀏覽器視窗中,您會看到 "Hello World" 以及本機連接埠號碼。In the browser window, you will see "Hello World" plus the local port number.

  3. 關閉網頁瀏覽器。Close the web browser.

恭喜您完成本快速入門,其中,您已開始使用 Visual Studio IDE 和 Node.js。Congratulations on completing this Quickstart in which you got started with the Visual Studio IDE and Node.js. 如果您想要更深入地鑽研其功能,請繼續目錄的 [教學課程]**** 一節中的教學課程。If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

後續步驟Next steps