如何在Visual Studio 2019的ASP.NET Core项目中使用npm包DOMPurify

嘿，刚接触npm的时候，确实会因为和NuGet的差异有点懵，我来帮你一步步理清这些问题～

一、为什么你的DOMPurify包没自动下载？ #

和NuGet不同，Visual Studio 2019默认不会自动帮你执行npm的包下载操作。你在package.json里添加了依赖声明，只是告诉npm“我需要这个包”，但真正下载包到本地的操作需要手动触发npm install命令：

• 你可以打开项目根目录的终端（VS里的“视图”->“终端”），直接输入npm install，回车后npm就会根据package.json的配置，把DOMPurify和它的依赖下载到项目根目录的node_modules文件夹里。
• 你之前看到的Dependencies节点下的“npm”文件夹，只是VS读取package.json后展示的依赖列表，它不会自动触发下载，只是告诉你“你声明了这些依赖”。

二、package.json和VS中“npm”依赖节点的作用 #

1. package.json的核心作用 #

这是npm生态里的核心配置文件，就像NuGet的PackageReference或packages.config，但功能更丰富：

• 记录项目的基本信息（名称、版本、描述等）
• 声明项目需要的依赖包（dependencies是生产环境依赖，devDependencies是开发环境依赖，比如你这里的DOMPurify如果是前端运行时需要的，其实可以放到dependencies里）
• 定义可执行的脚本命令（比如npm run build这类自定义命令）

2. VS中“npm”依赖节点的作用 #

这个只是Visual Studio提供的可视化展示工具：

• 它会读取你package.json里的依赖配置，把所有声明的npm包列出来，方便你快速查看项目依赖的包和版本
• 它本身不参与包的下载、更新或卸载，所有实际的依赖管理操作还是由npm命令完成的

三、能不能在Visual Studio中像管理NuGet那样管理npm包？ #

当然可以！VS提供了几种方式让你像操作NuGet一样管理npm包：

方法1：使用VS内置的“npm包管理器”界面 #

右键你的ASP.NET Core项目，选择**“管理npm包”**，就会弹出和NuGet包管理器几乎一样的界面：

• 可以在“浏览”标签页搜索DOMPurify等npm包，直接点击“安装”，VS会自动更新你的package.json并执行npm install下载包
• 在“已安装”标签页可以查看、更新或卸载已有的npm包

方法2：设置自动恢复npm依赖 #

如果你想让VS在构建项目时自动确保依赖都已下载，可以添加预构建事件：

1. 右键项目 -> 属性
2. 切换到生成事件标签页
3. 在“预生成事件命令行”中输入：npm install
4. 点击确定，之后每次构建项目时，VS都会自动运行这个命令，帮你下载缺失的npm包

方法3：备选方案——使用LibMan（VS自带的前端库管理器） #

如果你觉得npm有点重，VS还自带了LibMan工具，专门用来管理前端静态资源：

1. 右键项目 -> 添加 -> 客户端库
2. 在弹出的窗口中，搜索“DOMPurify”，选择对应的包和版本
3. 指定要下载到项目的目录（比如wwwroot/lib/dompurify），点击“安装”
4. 它会直接把DOMPurify的编译好的JS文件下载到你指定的目录，不需要npm环境，适合简单的前端资源引用场景

四、DOMPurify的后续使用建议 #

当你通过npm成功安装DOMPurify后，你可以：

• 在CSHTML文件中直接引用node_modules/dompurify/dist/dompurify.min.js（注意路径要正确）
• 如果你的项目用了Webpack、Gulp等打包工具，可以在打包配置中引入DOMPurify，把它打包到你的前端bundle文件中

内容的提问来源于stack exchange，提问作者Tom Regan