在ASP.NET Core应用中添加使用npm包的网页：创建、路由配置及发布文件保障方案

我来一步步帮你搞定这个问题，从创建网页到配置路由再到确保发布时文件不丢，全给你安排明白：

1. 先搞定npm环境配置 #

首先你的ASP.NET Core项目里得有npm的配置文件，打开项目根目录的终端，跑下面两个命令：

• 初始化npm：npm init -y，这会自动生成package.json文件
• 安装你需要的npm包，比如我以常用的lodash为例：npm install lodash --save

接下来确保你的项目启用了静态文件中间件——.NET 6+的项目默认已经在Program.cs里加了app.UseStaticFiles();，如果没加的话一定要补上，不然访问不了wwwroot里的静态资源。

2. 创建使用npm包的网页 #

这里分两种常见场景，你选适合自己的：

场景A：用Razor Pages（简单直接） #

在项目的Pages文件夹右键新建一个Razor Page，命名为NpmPackagePage.cshtml，内容如下：

@page
@model NpmPackagePageModel
@{
    ViewData["Title"] = "使用NPM包的页面";
}

<h1>@ViewData["Title"]</h1>

<p>下面是用lodash处理数组的示例：</p>

<!-- 引用从npm包复制过来的脚本 -->
<script src="~/js/lodash.min.js"></script>
<script>
    // 调用lodash的map方法
    const originalArr = [1, 3, 5, 7];
    const multipliedArr = _.map(originalArr, num => num * 3);
    console.log(multipliedArr);
    document.write("数组乘3结果：" + multipliedArr.join(", "));
</script>

对应的代码后台文件NpmPackagePage.cshtml.cs（不需要逻辑的话可以空着）：

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourProjectNamespace.Pages;

public class NpmPackagePageModel : PageModel
{
    public void OnGet()
    {
    }
}

场景B：用MVC视图 #

1. 在Controllers文件夹里的控制器（比如HomeController）加一个动作方法：

public IActionResult NpmPage()
{
    return View();
}

2. 在Views/Home文件夹新建视图NpmPage.cshtml，内容和上面Razor Page的前端代码差不多，把引用脚本的部分保留就行。

3. 配置路由 #

• Razor Pages：默认路由就是文件名，比如你创建的是NpmPackagePage.cshtml，直接访问https://localhost:xxxx/NpmPackagePage就能打开页面
• MVC：默认路由是控制器名/动作名，也就是https://localhost:xxxx/Home/NpmPage；如果想自定义路由，可以在Program.cs里加：

app.MapControllerRoute(
    name: "custom-npm-route",
    pattern: "my-cool-npm-page",
    defaults: new { controller = "Home", action = "NpmPage" }
);

这样访问https://localhost:xxxx/my-cool-npm-page就能打开页面了。

4. 确保构建发布时文件不丢 #

这一步很关键，不然发布后npm包的文件可能会缺失，要做两个配置：

配置package.json的构建脚本 #

打开package.json，在scripts里加一个build命令，把npm包的文件复制到wwwroot（ASP.NET Core默认的静态文件目录）：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "scripts": {
    "build": "xcopy node_modules\\lodash\\lodash.min.js wwwroot\\js\\ /Y"
    // 如果是Mac/Linux，把xcopy换成cp："cp node_modules/lodash/lodash.min.js wwwroot/js/"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

这个命令的作用是把lodash的压缩脚本复制到wwwroot的js文件夹里，/Y是覆盖已有文件的意思。

配置.csproj文件自动执行npm命令 #

打开你的项目文件（比如YourProject.csproj），添加下面的配置，让构建时自动安装npm依赖并执行build脚本：

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
  <!-- 安装npm依赖 -->
  <Exec Command="npm install" WorkingDirectory="$(ProjectDir)" />
  <!-- 执行build脚本复制文件 -->
  <Exec Command="npm run build" WorkingDirectory="$(ProjectDir)" />
</Target>

<!-- 确保wwwroot的所有文件都被包含在发布包里 -->
<ItemGroup>
  <Content Include="wwwroot/**/*" />
</ItemGroup>

5. 验证一下 #

• 运行项目，访问对应的路由，打开浏览器控制台，应该能看到数组处理的结果，页面上也会显示内容，说明npm包加载成功
• 执行dotnet publish发布项目，打开发布后的文件夹，检查wwwroot/js里有没有lodash.min.js，然后运行发布后的程序，访问页面，功能正常就说明没问题了

如果是复杂的前端场景（比如多个npm包组合、ES6语法），可以用webpack或者Vite来打包，把打包后的文件输出到wwwroot，然后在网页里引用打包后的文件就行，配置思路是一样的。

内容的提问来源于stack exchange，提问作者Mohamad Elnaqeeb