前言
在 ASP.NET 團隊的 Github 的首頁上，有這樣一個開源項目叫：“JavaScriptsServices”，那麼
什麼是 JavaScriptsServices 呢？ 它又有什麼用呢？
下面就讓我們一起來看一下吧。
什麼是 JavascriptServices
GitHub：https://github.com/aspnet/JavaScriptServices
JavascriptServices 是微軟提供給 ASP.NET Core 開發者的一項技術，如果你使用的是 Angular2，React，Knockout等這些Javascript技術之一的話， 他提供了一些基礎的程式集供開發者來很友善的調用Javascript，同時，你可以很友善的整合 NodeJS 代碼到你的ASP.NET Core應用程式中。
JavascriptServices 是提供給開發者一套工具，目前已經以NuGet包的形式釋出，主要包括這三個程式集：
Microsoft.AspNetCore.NodeServices
，
Microsoft.AspNetCore.SpaServices
，
Microsoft.AspNetCore.AngularServices
。
還有一個包叫
ReactServices
，現在已經不需要它了，你可以使用 SpaServices 替代之。
現在就來分别看一下這三個包吧。
必須的環境：
1、NodeJS 環境，可以在程式目錄下使用
node -v
，來檢視是否具有Node環境。
2、ASP.NET Core 環境，可以在程式目錄下使用
dotnet --version
，來檢視是否具有 dotnet 環境。
NodeServices
NodeServices 是一個基礎包，它主要是提供了在 .NET 程式 Server 端運作 Javascript 的功能，要做到這一點，他是利用了NodeJS 的環境。來看看怎麼樣使用吧。
首先建立一個 ASP.NET Core WebApi 項目，然後在項目根目錄建立一個Node檔案夾，然後添加一個
addNumbers.js
的檔案，
檔案内容如下：
module.exports = function (callback, first, second) {
var result = first + second;
callback(null /* error */, result);
};
這裡有有個JS函數，它将在.NET 程式中被調用，通過傳入一個 Node風格的回調函數和兩個參數來計算結果。
在NodeJS中，一個 JS 檔案即代表一個子產品，
module.exports
的意思是把目前函數作為一個對象提供出去以供調用。
然後在 Controller 檔案夾建立一個
NodeController.cs
的檔案。整個解決方案看起來是這個樣子的：
為了使用 NodeServices，你需要
using Microsoft.AspNetCore.NodeServices
，然後在 Startup.cs 檔案中的 ConfigureServices 方法添加如下：
public void ConfigureServices(IServiceCollection services)
{
// ... 其他代碼 ...
// 啟用 Node Services
services.AddNodeServices();
}
現在，你就可以在 Action 中使用NodeServices庫為我們提供的功能了，打開
NodeController.cs
，修改如下：
using Microsoft.AspNetCore.NodeServices;
[Route("api/[controller]")]
public class NodeController : Controller
{
public async Task<IActionResult> Get([FromServices] INodeServices nodeServices) {
var result = await nodeServices.InvokeAsync<int>("./Node/addNumbers", 1, 2);
return Content("1 + 2 = " + result);
}
}
這裡使用的是 [FromServices] 解析的
INodeServices
接口來供我們使用調用Node Javascript。然後我們再看一下
InvokeAsync<T>
（``），他是一個異步的方法，通過傳入一個node.js腳本檔案（子產品），兩個形參 來得到一個結果。
方法簽名： Task InvokeAsync(string moduleName, params object[] args);
然後，我們使用 Postman 來測試一下：
結果符合預期，現在，我們已經在ASP.NET Core 程式中成功的調用了Node提供的Javascript腳本服務，是不是很友善。
SpaServices
SpaServices 這個包是基于 NodeServices 建構的，當你基于單頁面應用（SPA）來建構應用程式的話，它為你提供了很多很有用的助手工具，像 路由助手（Routing）、服務端的預渲染（Pre-Rendering） 、Webpack中間件 、子產品熱替換（HMR）等。 下面來依次看一下：
Routing helper
在單頁面應用程式中，也許你想同時配置服務端路由以及配置用戶端路由，大多數時候，這兩個路由系統将互不幹擾獨立運作。但是有些時候可能會有問題，就是怎麼樣識别404。
這個時候你可能就會用到 Routing helper ，它叫
MapSpaFallbackRoute
, 它将幫助你更加友善的做這個工作。
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
Pre-Rendering
你可以建立一個同構的（Isomorphic ）JavaScript 伺服器預渲染的應用。對于 isomorphic web app 可能了解的人不是特别多，就是說一套JS代碼可能同時運作于服務端和用戶端，是不是很有趣，利用這種技術有助于提高SEO(搜尋引擎優化)和用戶端性能。
Webpack
如果你正在使用 webpack，那麼 SpaServices 裡面的 webpack 中間件将簡化你的開發過程，使用此中間件将會攔截webpack比對的檔案請求并且在記憶體中動态建構，然後直接到浏覽器中。
HMR
使用這種技術，你可以減少大幅減少子產品加載的時間，通過啟用中間件的HMR支援，在你對磁盤上的檔案（如 .ts/.html/.sass 等）做出更改的時候，會自動建構，然後會把結果推到浏覽器上，你就不需要手動的去重新整理浏覽器了。
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = true
});
這個包還包含了很多其他的一些功能，有興趣的可以去 github 了解一下。
AngularServices
AngularServices 主要提供了一些擴充的工具，包括一些驗證助手，還有一些"cache priming"的功能。
示例模闆
你可以通過 yeoman 工具來生成基于 Angular2、Knockout、React、React+Redux 等的ASP.NET Core SPAs 示例模闆。
npm install -g yo generator-aspnetcore-spa
npm install -g webpack
然後建立項目：
yo aspnetcore-spa
可以選擇Angular2、Knockout、React、React+Redux等來生成SPA項目，生成完成後以開發環境方式啟動項目：
Windows:
set ASPNETCORE_ENVIRONMENT=Development
dotnet run
Linux 或 masOS：
export ASPNETCORE_ENVIRONMENT=Development
dotnet run
現在，你就可以感受一下基于 ASP.NET Core + SPA 的應用了。
試着對項目做更多你熟悉的操作吧：比如修改用戶端資源（.ts, .tsx, .html），看看浏覽器的變化吧。
總結
這是一套對于ASP.NET Core開發者來說非常友善的工具在建構 JavaScripts 應用程式服務時候，目前該庫目前也在快速的疊代中，也許提供出來的這些功能隻是一個開始……
如果你覺得本篇部落格對您有幫助的話，感謝您的【推薦】，如果你對 .NET Core 感興趣可以關注我，我會定期在部落格分享關于 .NET Core 的學習心得。
本文位址：http://www.cnblogs.com/savorboard/p/dotnet-javascript-services.html
作者部落格：Savorboard
歡迎轉載，請在明顯位置給出出處及連結