by Fiyaz Hasan
警告
This function is EXPERIMENTAL.
本文所述的功能從 ASP.NET Core 3.0 開始已過時。 Microsoft.AspNetCore.SpaServices.Extensions NuGet 套件中提供更簡單的 SPA 架構整合機制。 如需詳細資訊，請參閱 [公告] Obsoleting Microsoft.AspNetCore.SpaServices 和 Microsoft.AspNetCore.NodeServices。
The functions described in this paper are outdated from ASP.NET Core 3.0. NuGetsons< > provides a simpler SPA architecture integration scheme. For more detailed information, please refer to
單頁應用程式 (SPA) 是 Web 應用程式的熱門類型，因為其固有豐富的使用者體驗。 將用戶端 SPA 架構或程式庫 (例如 Angular 或 React) 與 ASP.NET Core 等伺服器端架構整合可能很困難。 JavaScript 服務已開發，以減少整合流程中的摩擦。 它可讓不同用戶端與伺服器技術堆疊之間順暢地作業。
The single page application (SPA) is a popular type of Web application because of its inherent abundance of users. It may be difficult to integrate client SPA structures or libraries (e.g. or ) with server structures such as ASP.NET Core. JavaScript services have been launched to reduce friction in the integration process.
JavaScript Services 是適用於 ASP.NET Core 的用戶端技術集合。 其目標是將 ASP.NET Core 定位為開發人員組建 SPA 的慣用伺服器端平台。
JavaScript Services is a client technology collection suitable for ASP.NET Core. Its objective is to position ASP.NET Core as a custom server platform for developers to build SPA.
JavaScript 服務包含兩個不同的 NuGet 套件：
JavaScript contains two different NuGet packages:
- Microsoft.AspNetCore.NodeServices (NodeServices)
- Microsoft.AspNetCore.SpaServices (SpaServices)
這些套件在下列案例中很有用：
These packages were useful in the following cases:
- 在伺服器上執行 JavaScript
- 使用 SPA 架構或程式庫
- 使用 Webpack 組建用戶端資產
本文中的大部分焦點都放在使用 SpaServices 套件上。
Most of the focus in this paper is on using the SpaServices package.
SpaServices 已建立，將 ASP.NET Core 定位為開發人員組建 SPA 的慣用伺服器端平台。 SpaServices 不需要使用 ASP.NET Core 開發 SPA，也不會將開發人員鎖定至特定的用戶端架構。
SpaServices has been set up to position ASP.NET Core as a custom SPA server platform for developers. SpaServices does not need to use ASP.NET Core to develop SPAs, nor does it lock the developer into a specific client setup.
SpaServices 提供實用的基礎結構，例如：
SpaServices provides a foundation structure for use, such as:
這些基礎結構元件會共同增強開發工作流程和執行階段體驗。 您可以個別採用元件。
These building blocks together enhance the development of workflows and implementation sessions. You can use individual components.
若要使用 SpaServices，請安裝下列項目：
To use SpaServices, install the following items:
Node.js (版本 6 或更新版本) 與 npm
Node.js (version 6 or updated) and npm
若要確認這些元件已安裝且可以找到，請從命令列執行下列命令：
To confirm that these widgets are installed and can be found, perform the following command from the command line:
如果部署至 Azure 網站，則不需要採取任何動作— Node.js 會在伺服器環境中安裝且可供使用。
If deployed to the Azure site, no action is required - Node.js will be installed and available in the server environment.
-
- 在使用 Visual Studio 2017 的 Windows 上，會選取 .NET Core 跨平台開發 工作負載來安裝 SDK。
Microsoft.AspNetCore.SpaServices NuGet 套件
通用 (也稱為同構) 應用程式是一種能夠同時在伺服器和用戶端上執行的 JavaScript 應用程式。 Angular、React 和其他熱門架構提供此應用程式開發樣式的通用平台。 其概念是先透過 Node.js 在伺服器上轉譯架構元件，然後將進一步的執行委派給用戶端。
Universal (also known as co-structure) applications are a general platform for JavaScript applications that can be executed simultaneously on servers and client clients. Angular, React and other hotspot structures provide a model for this application development. The concept is to translate the building blocks on the server first via Node.js and then assign further execution to the client.
SpaServices 所提供的 ASP.NET Core 標記協助程式，藉由叫用伺服器上的 JavaScript 函式來簡化伺服器端預先轉譯的實作。
ASP.NET Core by using the JavaScript on the server.
安裝 aspnet-prerendering npm 套件：
Install aspnet-presentingnpm package:
標記協助程式可透過專案 檔案中的命名空間註冊來探索：
The tagging helper can be explored through the project's namespace registry in the file:
這些標記協助程式會利用 Razor 檢視內的類似 HTML 語法，將直接與低階 API 通訊的複雜度抽象化：
These tag helpers abstract the complexity of direct and low-level API communications using the equivalent HTML syntax in Razor's view:
上述程式碼範例中使用的 標記協助程式會透過 Node.js 在伺服器上執行 。 為了清楚起見， 檔案是 Webpack 組建流程中 TypeScript 到 JavaScript 轉譯工作的成品。 Webpack 會定義 的進入點別名; 而此別名的相依性關係圖周遊會從 檔案開始：
The tag helper used in the code template above will be executed on the server via Node. js. To be clear, the file is Webpack, which is the product of the conversion work by TypeScript to JavaScript. Webpack defines the entry-point alias; and this aliases video tour begins with the file:
在下列 Angular 範例中， 檔案會利用 npm 套件的 函式和 型別，透過 Node.js 設定伺服器轉譯。 以伺服器端轉譯為目標的 HTML 標記會傳遞至解析函式呼叫，其包裝在強型別 JavaScript 物件中。 物件的意義在於，它會以非同步方式將 HTML 標記提供給頁面，以在 DOM 的預留位置元素中插入。
In the following Angular examples, files use the function and type of the npm package to configure server translation via Node.js. The HTML tag that is translated at the server end transmits to the deconstruct function call and is packaged in a powerful JavaScript object. The object means that it provides the HTML tag to the page in a non-synchronous way to insert the default location element of DOM.
與 標記協助程式結合時， 標記協助程式可用來將內容資訊從 Razor 檢視傳遞至伺服器端 JavaScript。 例如，下列標記會將使用者資料傳遞至 模組：
When joining the tag helper, the tag helper can be used to transmit content information from the Razor view to the server's JavaScript. For example, the following tags transmit user data to the module:
接收的 引數會使用內建的 JSON 序列化程式序列化，並儲存在 物件中。 在下列 Angular 範例中，資料是用來建構 元素內的個人化問候語：
The accepted argument is sequenced using built-in JSON serialization programs and stored in objects. In the following Angular examples, data is used to construct personalised greeting messages within elements:
在標記協助程式中傳遞的屬性名稱會以 PascalCase 標記法表示。 與 JavaScript 形成對比，其中相同的屬性名稱會以 camelCase 表示。 預設 JSON 序列化設定會負責這項差異。
The attribute name transferred in the tag helper is expressed as
若要擴充上述程式碼範例，可以將提供給 函式的 屬性， 將資料從伺服器傳遞至檢視：
To expand the code template above, you can provide attributes to the function and transmit data from the server to the view:
物件內 定義的 陣列會附加至瀏覽器的全域 物件。 這個變數會提升到全域範圍，可消除重複的工作，特別是因為與在伺服器上載入相同的資料並在客戶端上再次載入有關。
The array defined in the object will be attached to the global object of the browser. This variable will be raised to the global area and will eliminate duplication of work, especially as it relates to loading the same data on the server and reloading it on the client.
Webpack Dev Middleware 引進簡化的開發工作流程，其中 Webpack 會視需要建置資源。 中介軟體會在瀏覽器中重新載入頁面時自動編譯並提供用戶端資源。 替代方法是當協力廠商相依性或自訂程式碼變更時，透過專案的 npm 組建指令碼手動叫用 Webpack。 檔案中的 npm 組建指令碼會顯示在下列範例中：
Webpack Dev Midleware leads to simplified development workflows where Webpack will look at the need to build the resource. The intermediary software will automatically compile and provide client-side resources when reloading the page in the browser.
安裝 aspnet-webpack npm 套件：
Install npm package:
Webpack Dev Middleware 會透過 檔案 方法中的下列程式碼註冊到 HTTP 要求管線：
Webpack Dev Middleware will register to HTTP through the following code in the file method:
必須先呼叫 擴充方法，才能透過 擴充方法註冊裝載的靜態檔案。 基於安全性考慮，只有在應用程式以開發模式執行時，才註冊中介軟體。
An extension method must be called before a static file mounted .
檔案的 屬性會告知中介軟體監看 資料夾是否有變更：
The properties of the file will inform the intermediary that the folder has been modified:
將 Webpack 的模組熱取代 (HMR) 功能視為 Webpack Dev Middleware 的演進。 HMR 引進了所有相同的優點，但它會在編譯變更之後自動更新頁面內容，進一步簡化開發工作流程。 請勿將此與瀏覽器的重新整理混淆，這會干擾 SPA 的目前記憶體內部狀態和偵錯工作階段。 Webpack Dev Middleware 服務和瀏覽器之間有即時連結，這表示變更會推送至瀏覽器。
The Webpack module (HMR) with /aspret/core/code-side/spa>.
安裝 webpack-hot-middleware npm 套件：
Install webpack-hot-midlewarenpm package:
HMR 元件必須在 方法中註冊至 MVC 的 HTTP 要求管線：
HMR widgets must be registered in the method to MVC's HTTP requires pipes:
如同 Webpack Dev Middleware， 擴充方法必須在 擴充方法之前呼叫。 基於安全性考慮，只有在應用程式以開發模式執行時，才註冊中介軟體。
Like Webpack Dev Middleware, the extension method must be called before the scaling method.
檔案必須定義 陣列，即使它保留空白：
The file must be defined as an array, even if it retains a blank:
在瀏覽器中載入應用程式之後，開發人員工具的 [主控台] 索引標籤會提供 HMR 啟用的確認：
After the application is loaded in the browser, the [master] index label of the developer tool will provide HMR-enabled confirmation:
在大部分 ASP.NET Core 型 SPA 中，除了伺服器端路由之外，通常還想要用戶端路由。 SPA 和 MVC 路由系統可以在不干擾的情況下獨立運作。 不過，有一個邊緣案例提出了挑戰：識別 404 個 HTTP 回應。
In most ASP.NET Core types of SPAs, in addition to the server's end-of-line route, client routers are usually wanted. The SPA and MVC route systems can operate independently without interruption.
請考慮使用 的無擴充路由案例。 假設要求不符合伺服器端路由的模式，但其模式與用戶端路由相符。 現在，請考慮 的連入要求，通常預期會在伺服器上尋找影像檔。 如果該要求的資源路徑不符合任何伺服器端路由或靜態檔案，用戶端應用程式不太可能處理它，通常傳回 404 HTTP 狀態碼。
Consider the non-expanding route cases that are used. Assuming that the requirements do not match the server's router's path, but the mode is the same as the user's path. Now, considering the connection requirements, you are usually expected to look for an image file on the server. If the requested resource path does not match any server's end path or static file, the client application is unlikely to handle it, usually returns the 404 HTTP status code.
安裝用戶端路由 npm 套件。 使用 Angular 作為範例：
Install client path packages from npm. Use Angular as an example:
方法中會使用名為 的擴充方法：
The method will be expanded using the name:
路由會依照其設定的順序進行評估。 因此，上述程式碼範例中的 路由會先用於模式比對。
Routers will be evaluated according to the order in which they are set. Therefore, the routers in the code examples mentioned above will be used first for pattern matching.
JavaScript 服務提供預先設定的應用程式範本。 SpaServices 會與 Angular、React 和 Redux 等不同架構和程式庫搭配使用這些範本。
The JavaScript service provides predefined application templates. SpaServices uses these templates in combination with different structures and libraries such as Angular, React and Redux.
執行下列命令，即可透過 .NET CLI 安裝這些範本：
Execute the following commands so that you can install these templates through.NET CLI:
會顯示可用的 SPA 範本清單：
Can not delete folder: %s: No such folder
| 範本 | 簡短名稱 | 語言 | 標籤 |
|---|---|---|---|
| MVC ASP.NET Core 與 Angular | angular | [C#] | Web/MVC/SPA |
| MVC ASP.NET Core 與 React.js | react | [C#] | Web/MVC/SPA |
| MVC ASP.NET Core 與 React.js 和 Redux | reactredux | [C#] | Web/MVC/SPA |
若要使用其中一個 SPA 範本建立新專案，請在 dotnet new 命令中包含範本的簡短名稱。 下列命令會建立 Angular 應用程式，並針對伺服器端設定 ASP.NET Core MVC：
To use one of the SPA templates to create a new project, please use the short name dotnet news command containing the template . The following command will create the Angular application and direct the server-end configuration to ASP.NET Core MVC:
存在兩種主要執行階段設定模式：
There are two main running session settings:
- 開發：
- 包含來源對應以簡化偵錯。
- 不會將用戶端程式代碼最佳化以達到效能。
- 生產：
- 排除來源對應。
- 透過統合和縮製來最佳化用戶端程式碼。
ASP.NET Core 會使用名為 的環境變數來儲存設定模式。 如需詳細資訊，請參閱設定環境。
ASP.NET Core will use the name of the environment variable to save the configuration mode. For more information, see .
在專案根目錄執行下列命令，以還原必要的 NuGet 和 npm 套件：
Run the following commands in the project root folder to restore the NuGet and npm packages that are necessary:
建置並執行應用程式：
Build and execute applications:
應用程式會根據執行階段設定模式在 localhost 上啟動。 在瀏覽器中瀏覽至 會顯示登陸頁面。
The application will be activated on localhost based on .
開啟 dotnet new命令所產生的 檔案。 在專案開啟時，會自動還原必要的 NuGet 和 npm 套件。 此還原程序可能需要幾分鐘的時間，且應用程式已準備就緒在完成時執行。 按一下綠色執行按鈕或按 ，瀏覽器會開啟至應用程式的登陸頁面。 應用程式會根據執行階段設定模式在 localhost 上執行。
Open the file generated by the command dotnetnew. When the project is opened, the necessary NuGet and npm packages will automatically be restored. The original application may take a few minutes and the application will be ready for execution at the time of completion. Press the green button or the browser will open the access page of the application.
SpaServices 範本已預先設定為使用 Karma 和 Jasmine 執行用戶端測試。 Jasmine 是 JavaScript 的熱門單元測試架構，而 Karma 則是這些測試的測試執行器。 Karma 已設定為使用 Webpack Dev Middleware，因此開發人員不需要在每次進行變更時停止並執行測試。 無論是針對測試案例或測試案例本身執行的程式碼，測試都會自動執行。
The SpaServices template has been pre-set to use and executive client survey. Jasmine is the hot copy test set of JavaScript, and Karma is the test tester of these tests.
以 Angular 應用程式為例， 檔案中已提供兩個針對 的 Jasmine 測試案例：
In the case of Angular applications, two cases of Jasmine testing have been provided in the file:
在 ClientApp 目錄中開啟命令提示字元。 執行以下命令：
Open the command hint character in the directory ClieentApp. Run the following command:
指令碼會啟動 Karma 測試執行器，它會讀取 檔案中定義的設定。 在其他設定中， 會識別要透過其 陣列執行的測試檔案：
The command code activates the Karma test executor, which reads the defined settings in the file. In other settings, the test files that are to be executed through their arrays are identified:
如需發佈至 Azure 的詳細資訊，請參閱此 GitHub 問題。
For more detailed information about Azure, see .
將產生的用戶端資產和已發佈的 ASP.NET Core 成品合併成現成部署套件可能會很麻煩。 值得慶幸的是，SpaServices 會使用名為 的自訂 MSBuild 目標協調整個發行流程：
It may be difficult to combine the generated client asset with the released ASP.NET Core product into a current deployment package. Fortunately, SpaServices will use its own custom MSBuild target to align the entire distribution process:
MSBuild 目標具有下列責任：
The MSBuild objective has the following responsibilities:
- 還原 npm 套件。
- 建立協力廠商用戶端資產的生產等級組建。
- 建立自訂用戶端資產的生產等級組建。
- 將 Webpack 產生的資產複製到 publish 資料夾。
執行時會叫用 MSBuild 目標：
When running, call MSBuild:
注册有任何问题请添加 微信：MVIP619 拉你进入群
打开微信扫一扫
添加客服
进入交流群
发表评论