ASP.NET Core非spa项目中的Webpack serve(或其他npm脚本)

iklwldmw  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(100)

我正在做一个ASP.NET Core非spa项目的前端部分,它与后端混合。我需要的是,当我构建和启动项目时,只需启动webpack-dev-server(或其他npm脚本,它将监视)。我将只提供js,css,assets,但没有html,因为有带.cshtml的Razor
现在我使用:

app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";                 
                spa.UseReactDevelopmentServer(npmScript: "start");
            });

解决了我的问题,它以某种方式工作,但我不明白为什么我需要使用这个。
为什么没有useDevelopmentServeruseNodeCommand之类的东西?
在我们的客户决定搬到SPA之前,我只需要在非SPA项目中使用所有现代发展的可能性。
当然,我可以从终端手动启动我的npm(或yarn或其他任何东西),但我需要过程的自动化,因为很难解释我们的后台如何做到这一点,因为它很方便。

lf3rwulv

lf3rwulv1#

我们可以使用中间件来实现它,我们应该让这个npm脚本只运行一次。下面是我的示例中间件。

NpmMiddleware.cs

public class NpmMiddleware
{
    private static bool _npmScriptStarted = false;
    private readonly RequestDelegate _next;
    private readonly string _sourcePath;
    private readonly string _npmScript;

    public NpmMiddleware(RequestDelegate next, string sourcePath, string npmScript)
    {
        _next = next;
        _sourcePath = sourcePath;
        _npmScript = npmScript;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        if (!_npmScriptStarted)
        {
            var isDevelopment = string.Equals(Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT"), "Development", StringComparison.OrdinalIgnoreCase);
            
            if (isDevelopment)
            {
                var npmScriptProcess = new Process
                {
                    StartInfo = new ProcessStartInfo
                    {
                        FileName = "npm",
                        Arguments = $"run {_npmScript}",
                        RedirectStandardError = true,
                        RedirectStandardInput = true,
                        RedirectStandardOutput = true,
                        UseShellExecute = false,
                        WorkingDirectory = _sourcePath
                    }
                };

                npmScriptProcess.Start();
                _npmScriptStarted = true;
            }
        }

        // Call the next delegate/middleware in the pipeline
        await _next(context);
    }
}
public static class NpmMiddlewareExtensions
{
    public static IApplicationBuilder UseNpmScript(this IApplicationBuilder builder, string sourcePath, string npmScript)
    {
        return builder.UseMiddleware<NpmMiddleware>(sourcePath, npmScript);
    }
}

并在Program.cs(或startup.cs文件,如果有的话)文件中使用它。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... other middlewares ...

    app.UseNpmScript("ClientApp", "start");

    // ... remaining configuration ...
}

相关问题