asp.net core mvc 中间件之WebpackDevMiddleware

2023年10月22日 226次阅读

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的设置、模块热加载断点等。这些设置需要传到Node的aspnet-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);
}

示例

  • 待更新…
点赞