如何使用 webpack 在带有 Asp.net MVC 的 Angular 2 中运行？

Question

我创建了一个使用 Angular2 作为前端的 MVC（aspnet 核心）应用程序。

我的解决方案的简化版本如下所示：

Solution
 - wwwroot (webpack bundled angular)
 |_ app.bundle.js (bundle)
 - app (angular 2 application)
 |_ Components
 |_ app.module.ts
 |_ main.ts
 - Controllers
 |_ HomeController.cs
 -Views
 |_Home
 -|_Index.cshtml
 -webpack.config.js
 -Startup.cs
 -project.json
 -package.json
 -web.config

我的问题是在调试和运行网站时。

我正在使用 IIS express 来调试站点。它可以工作，但调试需要挖掘创建的巨大 webpack app.bundle.js。 （我也不确定如何使用地图文件。Chrome 似乎没有解压缩它们。）

我读过的大多数调试文档都要求使用npm start 或webpack-dev-server。我认为我不能使用这些，因为我的网站需要提供 cshtml。

我也想去一个可以使用watch 自动编译和刷新我的网站的地方。

我可以设置 IIS（而不是 express）来同时提供 cshtml 和 angular 2 文件并轻松调试它们吗？ （最好使用处理更新的东西，例如watch）

Answer 1

您需要确保 .map 文件与 js 包一起生成并提供。这将告诉调试器（例如 chrome）映射回原始源文件。

确保 tsconfig.json 文件中的 "sourceMap" 设置为 true。

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 2

将 nuget 包用于核心单页应用程序的 Webpack。这将集成到您的 Startup.cs 文件中。

using Microsoft.AspNetCore.SpaServices.Webpack;

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IHttpContextAccessor httpContextAccessor)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
        {
            HotModuleReplacement = true,
            ConfigFile = "./webpack/webpack.config.js"
        });
    }
    else
    {
        app.UseExceptionHandler("/App/Error");
    }

    app.UseStaticFiles();

您仍然像往常一样配置 NPM Webpack。 （注意我使用webpack.config.js 来做所有常规的 webpack 配置。）

让我有点难以理解的概念是，您正在运行 2 个站点。一个（通常是端口 5000）为 CSHTML 提供服务，另一个（在 nuget webpack 中默认为 8080）提供 angular 2 捆绑的 javascript。

至于在 Chrome 中进行调试，请使用源代码中的 webpack:// 树来设置断点并逐步执行代码。正如@Kyle Trauberman 所说，一定要启用源地图。