如何在Visual Studio 2017的ASP.NET Core 2中使用npm包及处理node_modules？

Hey there! Let's tackle your two questions about using npm packages in your ASP.NET Core 2 project with Visual Studio 2017— I’ve got you covered.

Getting set up with npm is straightforward once you know the steps:

• Add a package.json file: Right-click your project in Solution Explorer → Add → New Item, then search for and select "npm Configuration File" (this creates a package.json at your project root). Alternatively, open the Package Manager Console and run npm init -y to generate a basic package.json quickly.
• Install your desired packages: Use the Package Manager Console or a terminal window in your project root to install packages. For example, to install jQuery, run npm install jquery --save (the --save flag adds the package to your package.json dependencies). For tools you only need during development (like build utilities), use --save-dev instead.
• Reference the files: Now, this is where your second question comes in— since node_modules lives outside wwwroot, Visual Studio won’t automatically recognize those files for intellisense or static file serving. Let’s fix that next.

Here are the standard, production-ready solutions to handle this:

Option 1: Use LibMan (Visual Studio's built-in library manager) #

LibMan is the simplest way to copy only the files you need from node_modules into wwwroot, where Visual Studio can easily recognize them:

• Right-click your project → Add → Client-Side Library.
• In the popup window:
  • Set Provider to npm.
  • Enter the package you want (e.g., jquery@3.6.0).
  • Expand the package to select specific files (like dist/jquery.min.js or dist/jquery.min.css).
  • Set Target Location to a folder inside wwwroot (e.g., wwwroot/lib/jquery/).
• Click Install— LibMan will copy the selected files to your target folder, and Visual Studio will immediately recognize them for intellisense and static file serving.

Option 2: Use Gulp/Grunt for build-time file copying #

If you need more control (like minification, bundling, or compiling SCSS), use a build tool like Gulp:

1. Install Gulp and a copy utility: Run npm install gulp gulp-copy --save-dev in your project root.
2. Create a gulpfile.js at your project root with this basic copy logic (adjust paths for your packages):

   const gulp = require('gulp');
   const copy = require('gulp-copy');
   
   // Task to copy jQuery files to wwwroot
   gulp.task('copy-jquery', function() {
     return gulp.src('node_modules/jquery/dist/**/*')
       .pipe(copy('wwwroot/lib/jquery', {prefix: 3}));
   });
   
   // Default task that runs when you call `gulp`
   gulp.task('default', gulp.series('copy-jquery'));
   

3. Open Visual Studio's Task Runner Explorer (go to View → Other Windows → Task Runner Explorer). You’ll see your Gulp tasks here— right-click default to run it manually, or set it to run automatically when your project builds.

Option 3: Configure static file access (not recommended for production) #

You can make ASP.NET Core serve files directly from node_modules, but this exposes the entire folder (which is insecure and bloated) and won’t fix Visual Studio’s intellisense issues. It’s only useful for quick testing:

• In Startup.cs, update the Configure method to add:

  using System.IO;
  using Microsoft.AspNetCore.Hosting;
  
  // ...
  
  app.UseStaticFiles(new StaticFileOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(Directory.GetCurrentDirectory(), "node_modules")),
      RequestPath = "/node_modules"
  });
  

• You can now reference files like /node_modules/jquery/dist/jquery.min.js in your views, but Visual Studio won’t give you autocomplete for those paths.

Quick recommendation #

Stick with LibMan for simple use cases—it’s built into Visual Studio and keeps your project clean. For more complex workflows, Gulp is the way to go. Avoid the third option in production!

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