asp.net core mvc 中间件之WebpackDevMiddleware

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: asp.net core mvc 中间件之WebpackDevMiddlewareWebpackDevMiddleware中间件主要用于开发SPA应用,启用Webpack,增强网页开发体验。好吧,你想用来干嘛就干嘛,这次主要是通过学习该中间件,学习如何在core中启用Webpack支持通过上上篇asp.

asp.net core mvc 中间件之WebpackDevMiddleware

  • WebpackDevMiddleware中间件主要用于开发SPA应用,启用Webpack,增强网页开发体验。好吧,你想用来干嘛就干嘛,这次主要是通过学习该中间件,学习如何在core中启用Webpack支持
  • 通过上上篇asp.net core mvc 管道之中间件,大致可以了解中间件是什么东西,现在就以中间件为单位,一个一个点学习各种中间件,了解并掌握,最后学会自己写中间件
  • 该中间件源码

说明

WebpackDevMiddleware

  • Enables Webpack dev middleware support. This hosts an instance of the Webpack compiler in memory
    in your application so that you can always serve up-to-date Webpack-built resources without having
    to run the compiler manually. Since the Webpack compiler instance is retained in memory, incremental
    compilation is vastly faster that re-running the compiler from scratch.
    Incoming requests that match Webpack-built files will be handled by returning the Webpack compiler
    output directly, regardless of files on disk. If compilation is in progress when the request arrives,
    the response will pause until updated compiler output is ready.

  • 大概意思是Webpack编译器实例存在于内存,始终提供最新编译的资源,增量编译比重新编译速度要快得多。任何请求Webpack编译后的文件,都原样返回,如果请求到达时编译没完成,响应将暂停,直到编译完成,输出准备就绪

NodeServices

  • Unlike other consumers of NodeServices, WebpackDevMiddleware dosen't share Node instances, nor does it
    use your DI configuration. It's important for WebpackDevMiddleware to have its own private Node instance
    because it must not restart when files change (if it did, you'd lose all the benefits of Webpack
    middleware). And since this is a dev-time-only feature, it doesn't matter if the default transport isn't
    as fast as some theoretical future alternative.

  • WebpackDevMiddleware不共享Node实例,也不共享使用的DI配置。因为文件改变时Node服务不能重启。这是个开发时使用的功能,所以传输速度可能不会很快

分析

  • 创建Node实例
var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices);
var nodeServices = NodeServicesFactory.CreateNodeServices(nodeServicesOptions);
  • 创建devServerOptions,包含设置webpack.config.js的路径以及整合在Stratup.cs的设置、模块热加载断点等。这些设置需要传到Nodeaspnet-webpack模块,如果是自定义的模块,那么参数也是自己定义啦
var devServerOptions = new
{
    webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile),
    suppliedOptions = options,
    understandsMultiplePublicPaths = true,
    hotModuleReplacementEndpointUrl = hmrEndpoint
};
  • 下面是通过nodeServices,执行指定aspnet-webpack模块里面的方法并得到结果。参数分别是模块文件路径、要调用的方法、传递的参数。传递给js模块的参数先序列成json字符串,模块接收参数后再反序列化成对象
var devServerInfo =
    nodeServices.InvokeExportAsync<WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer",
        JsonConvert.SerializeObject(devServerOptions, jsonSerializerSettings)).Result;
  • 返回结果是Webpack编译之后的输出目录,循环输出目录,添加请求代理,代理到所有输出目录。超时时间100s, /__webpack_hmr无限超时
  • 代理源码
foreach (var publicPath in devServerInfo.PublicPaths)
{
    appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath + hmrEndpoint, devServerInfo.Port, Timeout.InfiniteTimeSpan);
    appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath, devServerInfo.Port, TimeSpan.FromSeconds(100));
}

// Note that this is hardcoded to make requests to "localhost" regardless of the hostname of the
// server as far as the client is concerned. This is because ConditionalProxyMiddlewareOptions is
// the one making the internal HTTP requests, and it's going to be to some port on this machine
// because aspnet-webpack hosts the dev server there. We can't use the hostname that the client
// sees, because that could be anything (e.g., some upstream load balancer) and we might not be
// able to make outbound requests to it from here.
// Also note that the webpack HMR service always uses HTTP, even if your app server uses HTTPS,
// because the HMR service has no need for HTTPS (the client doesn't see it directly - all traffic
// to it is proxied), and the HMR service couldn't use HTTPS anyway (in general it wouldn't have
// the necessary certificate).
var proxyOptions = new ConditionalProxyMiddlewareOptions(
    "http", "localhost", proxyToPort.ToString(), requestTimeout);
appBuilder.UseMiddleware<ConditionalProxyMiddleware>(publicPath, proxyOptions);

结果

  • 创建自己的中间件,自定义配置,运行Webpack服务,只需要创建Node实例,调用自己写的模块即可。模块根据传过来的配置运行服务即可
  • 关键方法
var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices); // node配置

var nodeServices = NodeServicesFactory.CreateNodeServices(nodeServicesOptions); // 创建node实例 

// dev服务配置
var devServerOptions = new
{
    webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile),
    suppliedOptions = options,
    understandsMultiplePublicPaths = true,
    hotModuleReplacementEndpointUrl = hmrEndpoint
};

// 调用js模块,运行dev服务,返回输出目录
var devServerInfo =
    nodeServices.InvokeExportAsync<WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer",
        JsonConvert.SerializeObject(devServerOptions, jsonSerializerSettings)).Result;

// 添加输出目录到代理
foreach (var publicPath in devServerInfo.PublicPaths)
{
    appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath + hmrEndpoint, devServerInfo.Port, Timeout.InfiniteTimeSpan);
    appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath, devServerInfo.Port, TimeSpan.FromSeconds(100));
}

private static void UseProxyToLocalWebpackDevMiddleware(this IApplicationBuilder appBuilder, string publicPath, int proxyToPort, TimeSpan requestTimeout)
{
    var proxyOptions = new ConditionalProxyMiddlewareOptions(
        "http", "localhost", proxyToPort.ToString(), requestTimeout);
    appBuilder.UseMiddleware<ConditionalProxyMiddleware>(publicPath, proxyOptions);
}

示例

  • 待更新...
用心做好每一件事,结果会给你最大的惊喜!
目录
相关文章
|
29天前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
69 0
|
29天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
19 0
|
3月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
44 0
|
3月前
|
缓存 监控 NoSQL
一个.Net Core开源缓存中间件,让你更加简单、方便使用缓存
一个.Net Core开源缓存中间件,让你更加简单、方便使用缓存
116 0
|
4月前
|
开发框架 中间件 .NET
ASP.NET CORE 自定义中间件
ASP.NET CORE 自定义中间件
36 0
|
4月前
|
开发框架 前端开发 JavaScript
ASP.NET Core 中间件
ASP.NET Core (MiddleWare) 什么是ASP.NET核心中间件组件?ASP.NET核心中间件组件是被组装到应用程序管道中以处理HTTP请求和响应的软件组件(从技术上来说,组件只是C#类)。 ASP.NET Core应用程序中的每个中间件组件都执行以下任务。选择是否将 HTTP 请求传递给管道中的下一个组件。这可以通过在中间件中调用下一个 next() 方法实现。可以在管...
48 0
ASP.NET Core 中间件
|
6月前
|
SQL 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。
86 0
|
前端开发 .NET 开发框架
基于Asp.Net Core Mvc和EntityFramework Core 的实战入门-目录
本系列教程教您如何创建使用Entity Framework Core进行数据访问的ASP.NET Core MVC Web应用程序。 教程需要Visual Studio 2017 u 我的项目地址:https://github.com/ltm0203/ASP.NETCore 我建议你使用Visual Studio 2017 以及Sqlserver 2012 ASP.NETCore 这个项目中主要是基于ASP.NET Core的一些入门教程。
1192 0
|
29天前
|
开发框架 前端开发 JavaScript
盘点72个ASP.NET Core源码Net爱好者不容错过
盘点72个ASP.NET Core源码Net爱好者不容错过
21 0
|
29天前
|
开发框架 .NET
ASP.NET Core NET7 增加session的方法
ASP.NET Core NET7 增加session的方法
20 0

相关产品

  • 云消息队列 Kafka 版
  • 云消息队列 MQ
  • 微服务引擎