前言
在 ASP.NET 團隊的 Github 的主頁上，有這樣一個開源項目叫：「JavaScriptsServices」，那麼
什麼是 JavaScriptsServices 呢？ 它又有什麼用呢？javascript
下面就讓咱們一塊兒來看一下吧。html
什麼是 JavascriptServices
GitHub：https://github.com/aspnet/JavaScriptServicesjava
JavascriptServices 是微軟提供給 ASP.NET Core 開發者的一項技術，若是你使用的是 Angular2，React，Knockout等這些Javascript技術之一的話， 他提供了一些基礎的程序集供開發者來很方便的調用Javascript，同時，你能夠很方便的整合 NodeJS 代碼到你的ASP.NET Core應用程序中。node
JavascriptServices 是提供給開發者一套工具，目前已經以NuGet包的形式釋出，主要包括這三個程序集：Microsoft.AspNetCore.NodeServices，Microsoft.AspNetCore.SpaServices，Microsoft.AspNetCore.AngularServices。還有一個包叫ReactServices，如今已經不須要它了，你可使用SpaServices替代之。如今就來分別看一下這三個包吧。webpack
必須的環境：nginx
一、NodeJS 環境，能夠在程序目錄下使用node -v，來查看是否具備Node環境。
二、ASP.NET Core 環境，能夠在程序目錄下使用 dotnet --version，來查看是否具備 dotnet 環境。git
NodeServices
NodeServices 是一個基礎包，它主要是提供了在 .NET 程序 Server 端運行 Javascript 的功能，要作到這一點，他是利用了NodeJS 的環境。來看看怎麼樣使用吧。github
首先新建一個 ASP.NET Core WebApi 項目，而後在項目根目錄新建一個Node文件夾，而後添加一個 addNumbers.js的文件，
文件內容以下：web
module.exports = function (callback, first, second) { var result = first + second;
callback(null /* error */, result);
};
這裏有有個JS函數，它將在.NET 程序中被調用，經過傳入一個 Node風格的回調函數和兩個參數來計算結果。
在NodeJS中，一個 JS 文件即表明一個模塊，module.exports的意思是把當前函數做爲一個對象提供出去以供調用。sql
而後在 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 工具來生成基於 Angular二、Knockout、React、React+Redux 等的ASP.NET Core SPAs 示例模板。
npm install -g yo generator-aspnetcore-spa
npm install -g webpack
而後建立項目：
yo aspnetcore-spa
能夠選擇Angular二、Knockout、React、React+Redux等來生成SPA項目，生成完成後以開發環境方式啓動項目：
Windows:
set ASPNETCORE_ENVIRONMENT=Developmentdotnet run
Linux 或 masOS：
export ASPNETCORE_ENVIRONMENT=Development
dotnet run
如今，你就能夠感覺一下基於 ASP.NET Core + SPA 的應用了。
試着對項目作更多你熟悉的操做吧：好比修改客戶端資源（.ts, .tsx, .html），看看瀏覽器的變化吧。
總結
這是一套對於ASP.NET Core開發者來講很是方便的工具在構建 JavaScripts 應用程序服務時候，目前該庫目前也在快速的迭代中，也許提供出來的這些功能只是一個開始……
原文地址：http://www.cnblogs.com/savorboard/p/dotnet-javascript-services.html
.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注
本文分享自微信公衆號 - dotNET跨平臺（opendotnet）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。