我正在使用npm管理ASP.NET Core应用程序所需的jQuery，Bootstrap，Font Awesome和类似的客户端库。

对我有用的方法是将package.json文件添加到项目中，如下所示：

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm将这些软件包还原到node_modules文件夹中，该文件夹与项目目录中的wwwroot处于同一级别：

由于ASP.NET Core从wwwroot文件夹提供静态文件，而node_modules不存在，因此我必须进行一些更改才能使此工作生效，第一个：在Startup中的app.UseStaticFiles之前添加app.UseFileServer。 cs文件：

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

第二个，在project.json文件的publishOptions中包括node_modules：

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

这在我的开发环境中有效，当我将其部署到我的Azure App Service实例时也可以使用，可以很好地提供jquery，引导程序和超棒的静态文件，但是我不确定这种实现。

什么是正确的方法？

此解决方案是在从多个来源收集了大量信息并尝试了一些无效的信息之后得出的，而不得不从wwwroot外部提供这些文件似乎有些奇怪。

任何建议将不胜感激。

通过发布整个node_modules文件夹，您正在部署的文件将远远超过生产中实际需要的文件。

相反，在构建过程中使用任务运行器打包所需的文件，并将其部署到您的 wwwroot文件夹中。这也使您可以同时处理和最小化资产，而不必分别为每个单独的库提供服务。

然后，您也可以完全删除FileServer配置并依靠它UseStaticFiles。

目前，gulp是VS任务运行程序的首选。将a添加gulpfile.js到项目的根目录，并将其配置为在发布时处理静态文件。

例如，您可以将以下scripts部分添加到您的project.json：

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

可以与以下gulpfile一起使用（使用脚手架时的默认设置yo）：

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

• 使用 npm管理客户端库是一个不错的选择（而不是鲍尔或的NuGet），你是在正确的方向思考:)
• 将服务器端（ASP.NET Core）和客户端（例如Angular 2，Ember，React）项目拆分到单独的文件夹中（否则您的ASP.NET项目可能会有很多干扰-客户端代码，node_modules的单元测试文件夹，构建文物等）。与您在同一团队中工作的前端开发人员将对此表示感谢：）
• 在解决方案级别还原npm模块（类似于通过NuGet还原软件包的方式-不在项目的文件夹中），通过这种方式，您还可以在单​​独的文件夹中进行单元和集成测试（而不是在您的内部进行客户端JavaScript测试） ASP.NET Core项目）。
• 使用可能不需要FileServer，有StaticFiles只要提供静态文件（.js，图像等）就足够了
• 使用Webpack将您的客户端代码捆绑为一个或多个块（捆绑）
• 您可能不需要Gulp / Grunt如果使用的是Webpack等模块捆绑器，则
• 使用ES2015 + JavaScript（与Bash或PowerShell相对）编写构建自动化脚本，它们将跨平台工作，并且可供各种Web开发人员访问（如今，每个人都讲JavaScript）
• 重命名wwwroot为public，否则Azure Web Apps中的文件夹结构将令人困惑（D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public）
• 仅将编译后的输出发布到Azure Web Apps（永远不要推node_modules送到Web托管服务器）。参见tools/deploy.js示例。

在GitHub上访问ASP.NET Core入门工具包（免责声明：我是作者）

安装捆绑器和粉碎机到Visual Studio扩展中

然后，您创建一个bundleconfig.json并输入以下内容：

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

因此，捆绑程序和压缩程序（基于Gulp）可以访问源文件（应从Visual Studio中排除，也应从GIT中排除）并将源文件放入指定的wwwroot中

每次保存时只有副作用，它将运行此命令（但您可以将其设置为手动运行）

我给你两个答案。npm与其他工具结合在一起功能强大，但是需要一些工作来设置。如果只想下载某些库，则可能要改用“ 库管理器”（在Visual Studio 15.8中发行）。

NPM（高级）

首先在您的项目的根目录中添加package.json。添加以下内容：

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

这将使NPM将在新的asp.net核心项目中使用的Bootstrap，JQuery和其他库下载到名为node_modules的文件夹中。下一步是将文件复制到适当的位置。为此，我们将使用gulp，该产品也由NPM下载。然后在项目的根目录中添加一个名为gulpfile.js的新文件。添加以下内容：

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

此文件包含在构建和清理项目时执行的JavaScript代码。它将所有必要的文件复制到lib2（不是lib –您可以轻松更改此文件）。我在新项目中使用了相同的结构，但是很容易将文件更改到其他位置。如果您移动文件，请确保还更新_Layout.cshtml。请注意，在清理项目时，lib2-目录中的所有文件都将被删除。

如果右键单击gulpfile.js，则可以选择Task Runner Explorer。在这里，您可以手动运行gulp来复制或清除文件。

Gulp对于其他任务（例如缩小JavaScript和CSS文件）也可能很有用：

https://docs.microsoft.com/zh-cn/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

图书馆经理（简单）

右键单击您的项目，然后选择管理客户端库。文件libman.json现在打开。在此文件中，指定要使用的库和文件以及应将它们存储在本地的位置。真的很简单！以下文件复制了在创建新的ASP.NET Core 2.1项目时使用的默认库：

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.17.0",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.10",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "twitter-bootstrap@3.3.7",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "list.js@1.5.0",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

如果移动文件，请确保还更新_Layout.cshtml。

除了尝试提供节点模块文件夹之外，您还可以使用Gulp将所需的内容复制到wwwroot。

https://docs.asp.net/zh/latest/client-side/using-gulp.html

这可能也有帮助

Visual Studio 2015 ASP.NET 5，Gulp任务无法从node_modules复制文件

什么是正确的方法？

有很多“正确”的方法，您只需确定最适合您的需求的方法即可。似乎您误会了如何使用node_modules...

如果您熟悉NuGet，则应将npm视为其客户端对应对象。该node_modules目录类似于NuGet的bin目录。想法是，该目录只是用于存储软件包的公共位置，我认为最好像上那样处理需要的软件包。然后，例如使用任务运行程序将所需的文件复制到所需的位置。dependencypackage.jsonGulpwwwroot

我在一月份写了一篇关于此的博客文章，其中详细介绍了npm，Gulp以及今天仍然有用的许多其他细节。此外，有人呼吁关注我提出的我的SO问题，并最终在这里回答了我自己，这可能会有所帮助。

我创建了一个Gist以显示gulpfile.js为例。

在您中Startup.cs，使用静态文件仍然很重要：

app.UseStaticFiles();

这将确保您的应用程序可以访问所需的内容。

更简单的方法是使用OdeToCode.UseNodeModules Nuget包。我刚刚使用.Net Core 3.0进行了测试。您需要做的就是将包添加到解决方案中，并在Startup类的Configure方法中引用它：

app.UseNodeModules();

我从Shawn Wildermuth撰写的出色的《使用ASP.NET Core，MVC，Entity Framework Core，Bootstrap和Angular Pluralsight构建课程》中了解到了这一点。

Shawn Wildermuth在这里有一个很好的指南：https : //wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

本文链接到GitHub上的gulpfile，他在本文中实现了该策略。您可以将大多数gulpfile内容复制并粘贴到您的内容中，但是请确保在devDependencies下的package.json中添加适当的软件包：gulp gulp-uglify gulp-concat rimraf merge-stream

我找到了一种更好的方法来与NPM Gulp / Grunt任务运行器一起管理项目中的JS软件包。我不喜欢让NPM与另一层javascript库一起处理“自动化”，我的首要要求是简单地运行npm更新，而无需担心是否需要运行gulp东西，如果成功复制了所有内容，反之亦然。

NPM方式：

• JS缩小器已经捆绑在ASP.net核心中，请查找bundleconfig.json，所以这对我来说不是问题（不编译自定义内容）
• NPM的好处是文件结构良好，因此我总是可以在node_modules / module / dist下找到依赖项的预编译/最小化版本
• 我正在使用NPM node_modules / .hooks / {eventname}脚本来处理Project / wwwroot / lib / module / dist / .js文件的复制/更新/删除，您可以在这里找到文档https：// docs.npmjs.com/misc/scripts（一旦更加完善，我将更新用于git的脚本）我不需要其他任务运行程序（我不喜欢的.js工具）是什么让我的项目干净简单。

python方式：

https://pypi.python.org/pyp ...但是在这种情况下，您需要手动维护源

请原谅这篇文章的长度。

这是使用ASP.NET Core 2.5版的有效示例。

需要注意的是project.json已过时（请参阅此处），而支持.csproj。.csproj的问题。文件是大量功能，并且其文档没有中心位置（请参阅此处））。

还有一件事，该示例在Docker Linux（alpine 3.9）容器中运行ASP.NET内核。因此路径将反映出这一点。它还使用gulp ^ 4.0。但是，经过一些修改，它应该可以与ASP.NET Core，Gulp，NodeJS的较早版本一起使用，并且也可以不与Docker一起使用。

但这是一个答案：

gulpfile.js 在这里看到真正的工作示例

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

在.csproj文件中添加目标。注意，如果我们利用命令，我们还添加了一个Watch来监视和排除。dotnet run watch

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

现在dotnet run build运行时，它还将安装和构建节点模块。