教學課程：在 Visual Studio 中建立 Node.js 和 React 應用程式

使用 Visual Studio，您可以輕鬆地建立 Node.js 專案，並使用 IntelliSense 和其他支援 Node.js的內建功能。 在本教學課程中，您會從 Visual Studio 範本建立 Node.js Web 應用程式專案。 然後，您使用 React 創建一個簡單的應用程序。

在本教學課程中，您將瞭解如何：

• 建立 Node.js 專案
• 新增 npm 套件
• 將 React 程式碼新增至您的應用程式
• 轉譯 JSX
• 附加偵錯工具

這很重要

從 Visual Studio 2022 開始，您也可以使用建議的 CLI 型專案類型來建立 React 專案。 本文中的某些資訊僅適用於 Node.js 專案類型 （.njsproj）。 本文中使用的範本從 Visual Studio 2022 17.8 預覽版 2 開始不再可用。

在開始之前，這裡有一個快速常見問題解答，向您介紹一些關鍵概念：

• 什麼是 Node.js？

  Node.js 是一個執行 JavaScript 程式碼的伺服器端 JavaScript 執行環境。

• 什麼是 npm？

  Node.js 的預設套件管理員是 npm。 套件管理器可以更輕鬆地發布和共享 Node.js 原始程式碼庫。 npm 套件管理員簡化了程式庫的安裝、更新和卸載。

• 什麼是 React？

  React 是一個用於創建使用者介面 （UI） 的前端框架。

• 什麼是 JSX？

  JSX 是一種 JavaScript 語法擴展，通常與 React 一起使用來描述 UI 元素。 您必須先將 JSX 程式碼轉譯為純 JavaScript，然後才能在瀏覽器中執行。

• 什麼是 webpack？

  Webpack 捆綁了 JavaScript 文件，以便它們可以在瀏覽器中運行，並且還可以轉換或打包其他資源和資產。 Webpack 可以指定一個編譯器，例如 Babel 或 TypeScript，將 JSX 或 TypeScript 程式碼轉譯為純 JavaScript。

先決條件

本教學課程需要下列先決條件：

• 已安裝帶有 Node.js 開發工作負載的 Visual Studio。

  如果您尚未安裝 Visual Studio：

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

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

     

  如果您已安裝 Visual Studio，但需要 Node.js 工作負載：

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

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

• 安裝的 Node.js 執行階段：

  如果您尚未安裝 Node.js 執行階段，請 從 Node.js 網站安裝 LTS 版本。 LTS 版本與其他框架和函式庫具有最佳相容性。

  Visual Studio Node.js 工作負載中的 Node.js 工具同時支援 Node.js 32 位和 64 位架構版本。 Visual Studio 只需要一個版本，而 Node.js 安裝程式一次只支援一個版本。

  Visual Studio 通常會自動偵測已安裝的 Node.js 執行階段。 如果沒有，您可以將專案設定為參考已安裝的執行階段：

  1. 建立專案之後，請以滑鼠右鍵按一下專案節點，然後選取 [內容]。

  2. 在 [屬性] 窗格中，設定 Node.exe 路徑 以參考 Node.js的全域或本機安裝。 您可以在每個 Node.js 專案中指定本端直譯器的路徑。

本教學課程已使用 Node.js 12.6.2 進行測試。

建立專案

首先，建立 Node.js Web 應用程式專案。

1. 開啟 Visual Studio。

2. 建立新專案。

   按 Esc 關閉開始視窗。 輸入 Ctrl + Q 以開啟搜尋方塊，輸入 Node.js，然後選擇 [空白 Node.js Web 應用程式 - JavaScript]。 （雖然本教學課程使用 TypeScript 編譯器，但這些步驟需要您從 JavaScript 範本開始。

   在出現的對話框中，選擇 建立。

   如果您沒有看到 [空白 Node.js Web 應用程式 ] 專案範本，則必須新增 Node.js 開發 工作負載。 如需詳細指示，請參閱先 決條件。

   Visual Studio 會建立新的解決方案，並開啟您的專案。

   

   （1） 以 粗體 突出顯示的是您的項目，使用您在“ 新建項目 ”對話框中給出的名稱。 在檔案系統中，此專案由專案資料夾中的檔案 .njsproj 表示。 您可以設定與專案相關聯的內容和環境變數，方法是在專案上按一下滑鼠右鍵，然後選擇 「內容」（ 或按 Alt + Enter）。 您可以使用其他開發工具進行來回移動，因為專案檔不會對 Node.js 專案來源進行自訂變更。

   （2） 頂層是一個解決方案，預設與您的專案名稱相同。 解決方案 （由 .sln 磁碟上的檔案表示） 是一或多個相關專案的容器。

   （3）npm節點顯示任何已安裝的npm套件。 您可以用滑鼠右鍵按一下 npm 節點，使用對話方塊搜尋和安裝 npm 套件，或使用 npm 節點中的設定 package.json 和 按一下滑鼠右鍵選項來安裝和更新套件。

   （4） package.json 是npm用來管理本機安裝的套件的套件依賴和套件版本的檔案。 如需詳細資訊，請參閱 管理 npm 套件。

   （5）項目檔案（例如 server.js）顯示在項目節點下。 server.js 是專案啟動文件，這就是它以 粗體顯示的原因。 您可以在專案中的檔案上按一下滑鼠右鍵，然後選取 [ 設定為啟動檔案]Node.js 來設定啟動檔案。

新增 npm 套件

此應用程序需要以下 npm 模塊才能正確運行：

• 反應
• react-dom
• 快速
• 路徑
• TS-加載機
• TypeScript
• webpack
• webpack-cli

若要安裝套件：

1. 在 [方案總管] 中，以滑鼠右鍵按一下 npm 節點，然後選取 [安裝新的 npm 套件]。

2. 在「 安裝新的 npm 套件 」對話方塊中，搜尋 react 套件，然後選取 「安裝套件」 進行安裝。

   

   在 [安裝新的 npm 套件 ] 對話方塊中，您可以選擇安裝最新的套件版本或指定版本。 如果您選擇安裝目前版本，但稍後遇到非預期的錯誤，請嘗試安裝下一個步驟中列出的確切套件版本。

   Visual Studio 下窗格中的 [輸出] 視窗會顯示套件安裝進度。 選取「檢視>或按 Ctrl++ 開啟「輸出」視窗。 在 [輸出] 視窗的 [顯示輸出來源] 欄位中，選取 [Npm]。

   安裝時，反應套件會出現在方案總管的 npm 節點下。

   專案的package.json檔案會更新新的套件資訊（包括套件版本）。

而不是使用 UI 逐一搜尋並新增剩下的套件，您可以直接將所需的套件程式碼貼到 package.json 中。

1. 從 [方案總管] 中，在 Visual Studio 編輯器中開啟 package.json 。 在檔案結尾之前新增下列 dependencies 區段：

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   如果檔案已有區 dependencies 段，請將其取代為上述 JSON 程式碼。 如需有關使用檔案 package.json 的詳細資訊，請參閱 package.json 設定。

2. 按 Ctrl S+ 或選取 檔案> 以儲存變更。

3. 在 [方案總管] 中，以滑鼠右鍵按一下專案中的 npm 節點，然後選取 [安裝 npm 套件]。

   此命令直接執行 npm install 命令來安裝 packages.json中列出的所有套件。

   選取下方窗格中的 [輸出] 視窗以查看安裝進度。 安裝可能需要幾分鐘，而且您可能不會立即看到結果。 請務必在「輸出」視窗的「顯示輸出來源」欄位中選取 Npm。

   安裝之後，npm 模組會出現在方案總管的 npm 節點中。

   

   備註

   您也可以使用命令列來安裝 npm 套件。 在 [方案總管] 中，以滑鼠右鍵按一下專案名稱，然後選取 [在這裡開啟命令提示字元]。 使用標準 Node.js 命令來安裝套件。

新增專案檔案

接下來，將四個新檔案新增至您的專案。

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

對於這個簡單的應用程序，您可以在項目根目錄中添加新的項目文件。 對於大多數應用程序，您可以將文件添加到子文件夾並相應地調整相對路徑引用。

1. 在 [方案總管] 中，選取專案名稱，然後按 Ctrl+Shift+A，或以滑鼠右鍵按一下專案名稱，然後選取 [ 新增>專案]。

   如果您沒有看到所有項目範本，請選擇 [顯示所有範本]，然後選擇項目範本。

2. 在 [ 新增項目 ] 對話方塊中，選擇 [TypeScript JSX 檔案]，輸入名稱 app.tsx，然後選取 [ 新增 ] 或 [確定]。

3. 重複這些步驟以新增名為 webpack-config.js的 JavaScript 檔案。

4. 重複這些步驟以新增名為 index.html的 HTML 檔案。

5. 重複這些步驟以新增名為 tsconfig.json的 TypeScript JSON 組態檔。

新增應用程式程式碼

1. 在 [方案總管] 中，開啟 server.js ，並將現有的程式碼取代為下列程式碼：

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   上述程式碼使用 Express 來啟動 Node.js 作為 Web 應用程式伺服器。 程式碼會將連接埠設定為專案內容中設定的連接埠號碼，預設為 1337。 如果您需要開啟專案屬性，請以滑鼠右鍵按一下 [方案總管 ] 中的專案名稱，然後選取 [屬性]。

2. 開啟 app.tsx 並新增下列程式碼：

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   上述程式碼使用 JSX 語法和 React 來顯示訊息。

3. 開啟 index.html 並以下列程式碼取代該 body 區段：

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   此 HTML 頁面載入 app-bundle.js，其中包含轉譯為純 JavaScript 的 JSX 和 React 程式碼。 目前， app-bundle.js 是一個空檔案。 在下一節中，您將設定轉譯程式碼的選項。

設定 webpack 和 TypeScript 編譯器選項

接下來，您將 webpack 組態程式碼新增至 webpack-config.js。 您可以新增簡單的 webpack 組態，指定輸入檔案 app.tsx 和輸出檔案 app-bundle.js，以將 JSX 捆綁並轉譯為純 JavaScript。 對於轉譯，您也可以設定一些 TypeScript 編譯器選項。 這個基本的配置程式碼是對webpack和TypeScript編譯器的介紹。

1. 在 [方案總管] 中，開啟 webpack-config.js 並新增下列程式碼。

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   webpack 配置代碼指示 webpack 使用 TypeScript 加載器來轉譯 JSX。

2. 開啟 tsconfig.json 並將內容取代為以下程式碼，該程式碼指定了 TypeScript 編譯器選項：

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   程式碼會指定 app.tsx 為原始檔。

3. 按 Ctrl Shift++S 或選取 [檔案>] [全部儲存] 以儲存所有變更。

轉譯 JSX

1. 在 [方案總管] 中，以滑鼠右鍵按一下專案名稱，然後選取 [在這裡開啟命令提示字元]。

2. 在命令提示字元中，輸入下列 webpack 命令：

   node_modules\.bin\webpack --config webpack-config.js

   命令提示字元視窗會顯示結果。

   

   如果您看到任何錯誤而不是上述輸出，您必須先解決這些錯誤，應用程式才能運作。 如果您的 npm 套件版本與本教學課程指定的版本不同，可能會導致錯誤。 若要修正錯誤，請嘗試下列操作：

   • 如果您尚未使用，請使用先前步驟中顯示的確切版本

     或者，如果您仍然看到錯誤：

   • 以滑鼠右鍵按一下 [方案總管] 中的 npm 節點，然後選擇 [安裝 npm 套件]，以安裝最新版本的 npm 套件。

   如果一或多個套件版本已被取代並導致錯誤，您可能需要安裝較新的版本來修正錯誤。 如需用 package.json 來控制 npm 套件版本的資訊，請參閱 package.json 組態。

3. 在 [方案總管] 中，以滑鼠右鍵按一下專案節點，然後選取 [ 新增>現有的資料夾]。

4. 選取 dist 資料夾，然後選取 [選取資料夾]。

   Visual Studio 將包含 app-bundle.js 和 app-bundle.js.map 的 dist 資料夾新增至專案。

5. 開啟 app-bundle.js 以查看轉譯的JavaScript程式碼。

6. 如果系統提示是否要重新載入外部修改的檔案，請選取 [ 全部是]。

   

每當您對 app.tsx 進行變更時，都必須重新執行 webpack 命令。 若要自動執行此步驟，您可以新增建置指令碼來轉譯 JSX。

新增建置指令碼以轉譯 JSX

從 Visual Studio 2019 開始的 Visual Studio 版本需要組建腳本。 您可以選擇在從 Visual Studio 建置時編譯 JSX，而非如上一節所示在命令列進行編譯。

1. 開啟 package.json 並在該 dependencies 區段之後新增下列區段：

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. 儲存您的變更。

執行應用程式

1. 在 偵錯工具 列中，選取 網頁伺服器 （Microsoft Edge） 或 網頁伺服器 （Google Chrome） 作為偵錯目標。

   

   如果您知道您的電腦上有偏好的偵錯目標，但它未顯示為選項，請從偵錯目標下拉式清單中選取 [瀏覽與]。 在清單中選取您的預設瀏覽器目標，然後選取 設定為預設值。

2. 若要執行應用程式，請按 F5、選取綠色箭號按鈕，或選取 [偵錯>] [開始偵錯]。

   Node.js 主控台視窗隨即開啟，其中顯示偵錯工具接聽埠。

   Visual Studio 會啟動啟動檔案 server.js來啟動應用程式。

   

3. 關閉瀏覽器和主控台視窗。

設定中斷點並執行應用程式

斷點是可靠的除錯功能中最基本且必不可少的特性。 中斷點會指出 Visual Studio 應該暫停執行中程式碼的位置。 然後，您可以觀察變數值、記憶體行為或程式碼分支是否正在執行。

1. 在 server.js 中，按一下大括號左邊的空白區域以設置中斷點：

   

2. 若要執行應用程式，請按 F5 或選取 [偵錯>] [開始偵錯]。

   偵錯工具會在您設定的中斷點暫停，並醒目提示目前的陳述式。 現在，您可以使用偵錯工具視窗 （例如 [區域變數 ] 和 [監看式] 視窗） 將滑鼠停留在目前範圍內的變數上，以檢查應用程式狀態。

3. 若要繼續執行應用程式，請按 F5，在 [偵錯] 工具列中選取 [繼續]，或選取 [偵錯>繼續]。

   如果您想要使用 Chrome 開發人員工具或 Microsoft Edge 的 F12 工具，請按 F12。 您可以使用這些工具來檢查 DOM，並使用 JavaScript 主控台與應用程式互動。

4. 關閉瀏覽器和主控台視窗。

在客戶端 React 程式碼中設定並觸發斷點

在上一節中，您已將偵錯工具附加至伺服器端 Node.js 程式碼。 若要附加至用戶端 React 程式碼中的中斷點並觸發它們，您必須將偵錯工具附加至正確的進程。 以下是啟用瀏覽器並附加偵錯程式的一種方法。

啟用瀏覽器進行偵錯

您可以使用 Microsoft Edge 或 Google Chrome。 關閉目標瀏覽器的所有視窗。 對於 Microsoft Edge，還要關閉所有 Chrome 實例。 由於兩個瀏覽器共用 Chromium 程式碼庫，因此關閉兩個瀏覽器可提供最佳結果。

其他瀏覽器實例可能會阻止瀏覽器在啟用偵錯的情況下開啟。 瀏覽器擴充功能可能會阻止完整偵錯模式。 您可能需要使用工作管理員來尋找並結束所有正在運行的 Chrome 執行個體。

若要在啟用偵錯的情況下啟動瀏覽器：

1. 從 [偵錯] 工具列的下拉式清單中選取 [瀏覽方式]。

2. 在 [瀏覽方式] 畫面上，將您的偏好瀏覽器設為醒目提示，選取 [新增]。

3. 在「引數」欄位中輸入 --remote-debugging-port=9222 旗標。

4. 給瀏覽器賦予新的友善名稱，例如 帶偵錯的 Edge 或 帶偵錯的 Chrome，然後選取 確定。

5. 在 瀏覽方式 畫面上，選取 瀏覽。

   

• 或者，您可以右鍵單擊 Windows 開始按鈕，然後輸入執行指令：

  msedge --remote-debugging-port=9222

  或

  chrome.exe --remote-debugging-port=9222

瀏覽器會在啟用偵錯的情況下啟動。 應用程式尚未執行，因此瀏覽器頁面是空的。

將偵錯工具附加至用戶端指令碼

1. 在 Visual Studio 編輯器中，在 app-bundle.js 或 app.tsx 原始程式碼中設定中斷點。

   • 針對 app-bundle.js，在函數中 render() 設定中斷點。 若要在 render() 檔案中尋找函數，請按 Ctrl+F 或選取編輯>尋找和取代>快速尋找，然後在搜尋欄位中輸入 render。

     

   • 針對 app.tsx，在render()函式內，於return陳述式設定中斷點。

     

     如果您在 app.tsx 中設定中斷點，請同時更新 webpack-config.js 以取代下列程式碼，並儲存變更。

     替換此代碼：

     output: {
         filename: "./app-bundle.js",
     },
     

     使用此代碼：

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     此僅限開發的設定可在 Visual Studio 中啟用偵錯。 根據預設，來源對應檔案中的 webpack 參考包含 webpack:/// 前置詞，這可防止 Visual Studio 尋找來源檔案 app.tsx。 此設定會在建置應用程式時，覆蓋在來源映射檔案 app-bundle.js.map 中產生的參考。 具體而言，此設定會將來源檔案的參考從 webpack:///./app.tsx 變更為 ./app.tsx，以啟用偵錯。

2. 選取您的目標瀏覽器作為 Visual Studio 中的偵錯目標，然後按 Ctrl+F5，或選取 [偵錯>開始而不偵錯]，以在瀏覽器中執行應用程式。

   如果您使用易記名稱建立已啟用偵錯的瀏覽器組態，請選擇該瀏覽器作為偵錯目標。

   應用程式會在新的瀏覽器索引標籤中開啟。

3. 選擇 偵錯>附加至處理程序，或者按 Ctrl+Alt+P。

   小提示

   第一次附加至程序後，您可以選取 [偵錯>重新附加至程序 ] 或按 Shift+Alt+P ，以快速重新連接至相同的程序。

4. 在「 附加至程序 」對話方塊中，取得您可以附加的瀏覽器執行個體的篩選清單。

   請確定目標瀏覽器的正確偵錯工具 JavaScript （Chrome） 或 JavaScript （Microsoft Edge - Chromium） 出現在 [附加至 ] 欄位中。 在篩選方塊中輸入 chrome 或 edge 以篩選結果。

5. 在此範例中，選取具有正確主機埠的瀏覽器程序 localhost。 埠號 1337 或 localhost 也可能出現在 [標題] 欄位中，以協助您選取正確的程序。

6. 選取 ，附加。

   下列範例顯示 Microsoft Edge 瀏覽器的 [附加至進程 ] 視窗。

   

   小提示

   如果偵錯工具未附加，而且您會看到無法 附加至進程的訊息。在目前狀態下，作業不合法，請先使用工作管理員關閉目標瀏覽器的所有實例，然後再啟動瀏覽器的偵錯模式。 瀏覽器擴充功能可能正在運行，並阻止啟用完整的除錯模式。

7. 因為具有中斷點的程式碼已執行，因此請刷新瀏覽器頁面以觸發中斷點。

   根據您的環境、瀏覽器狀態，以及您稍早遵循的步驟，您可能會在 app-bundle.js 中達到中斷點，或在 app.tsx 中的對應位置。 無論哪種方式，您都可以逐步執行程式碼並檢查變數。

   當偵錯工具暫停時，您可以將滑鼠停留在變數上並使用偵錯工具視窗來檢查應用程式狀態。 若要逐步執行程式碼，請按 F11 或選取 [偵錯>逐步執行]，或按 F10 或選取 [偵錯>逐步執行]。 若要繼續執行程式碼，請按 F5 或選取 [繼續]。 如需基本偵錯功能的詳細資訊，請參閱 先查看偵錯工具。

   • 如果您無法中斷 app.tsx 中的程式碼，請重試使用 [附加至進程 ] 來附加偵錯工具，如先前步驟所述。 請確定您的環境已正確設定：

     • 使用工作管理員關閉所有瀏覽器執行個體，包括 Chrome 擴充功能。 請確定您以偵錯模式啟動瀏覽器。

     • 請確定您的來源對應檔案包含 ./app.tsx 的參考，而不是 webpack:///./app.tsx，這會防止 Visual Studio 偵錯工具尋找 app.tsx。

     或者，嘗試使用 debugger;app.tsx 中的陳述式，或改為在 Chrome 開發人員工具或 Microsoft Edge 的 F12 工具中設定中斷點。

   • 如果您無法破譯 app-bundle.js 中的程式碼，請移除原始程式碼對應檔案 app-bundle.js.map。

後續步驟

將應用程式部署至 Linux App Service