如何在 ASP.NET Core 中使用 npm

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

相反，在构建过程中使用任务运行器来打包您需要的文件，并将它们部署到您的 wwwroot 文件夹。这也将允许您同时连接和缩小您的资产，而不必分别为每个单独的库提供服务。

然后，您还可以完全删除 FileServer 配置并改用 UseStaticFiles。

目前，gulp 是首选的 VS 任务运行程序。将 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"]);

---

https://i.stack.imgur.com/UgxXD.png

使用 npm 管理客户端库是一个不错的选择（与 Bower 或 NuGet 不同），您的想法是正确的 :)

将服务器端（ASP.NET Core）和客户端（例如 Angular 2、Ember、React）项目拆分到单独的文件夹中（否则您的 ASP.NET 项目可能会有很多噪音 - 客户端代码 node_modules 的单元测试文件夹，构建工件等）。与您在同一个团队中工作的前端开发人员会感谢您 :)

在解决方案级别恢复 npm 模块（类似于通过 NuGet 恢复包的方式 - 不是到项目的文件夹中），这样您也可以在单独的文件夹中进行单元和集成测试（而不是在您的内部进行客户端 JavaScript 测试） ASP.NET Core 项目）。

使用可能不需要 FileServer，拥有 StaticFiles 应该足以提供静态文件（.js、图像等）

使用 Webpack 将您的客户端代码捆绑到一个或多个块（捆绑包）中

如果您使用的是 Webpack 等模块捆绑器，则可能不需要 Gulp/Grunt

用 ES2015+ JavaScript（而不是 Bash 或 PowerShell）编写构建自动化脚本，它们将跨平台工作，并且更容易被各种 Web 开发人员访问（现在每个人都说 JavaScript）

将 wwwroot 重命名为 public，否则 Azure Web Apps 中的文件夹结构会混乱（D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public）

仅将编译后的输出发布到 Azure Web 应用程序（永远不要将 node_modules 推送到 Web 托管服务器）。以 tools/deploy.js 为例。

访问 GitHub 上的 ASP.NET Core Starter Kit（免责声明：我是作者）

---

将 Bundler and Minifier 安装到 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/en-us/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/en/latest/client-side/using-gulp.html

这也可能有帮助

Visual Studio 2015 ASP.NET 5, Gulp task not copying files from node_modules

---

这样做的正确方法是什么？

有很多“正确”的方法，您只需决定哪一种最适合您的需求。您似乎误解了如何使用 node_modules...

如果您熟悉 NuGet，您应该将 npm 视为它的客户端对应物。其中 node_modules 目录类似于 NuGet 的 bin 目录。这个想法是这个目录只是一个存储包的常用位置，在我看来，最好在你需要的包上加上一个dependency，就像你在 package.json 中所做的那样。然后使用像 Gulp 这样的任务运行器将您需要的文件复制到所需的 wwwroot 位置。

我在一月份写了一篇关于此的blog post，其中详细介绍了 npm、Gulp 以及今天仍然相关的一大堆其他细节。此外，有人提请注意我提出的 SO 问题，并最终回答了我自己 here，这可能会有所帮助。

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

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

app.UseStaticFiles();

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

---

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

app.UseNodeModules();

我是从 Shawn Wildermuth 的出色 Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap, and 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 minifier 已经捆绑在 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 工具）来保持我的项目简洁明了。

蟒蛇方式：

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

---

请原谅这篇文章的长度。

这是一个使用 ASP.NET Core 2.5 版的工作示例。

值得注意的是，project.json 已过时 (see here)，取而代之的是 .csproj。 .csproj 的问题。文件是大量的功能，事实上它的文档没有中心位置 (see here)。

还有一件事，这个例子是在 Docker Linux (alpine 3.9) 容器中运行 ASP.NET core；所以路径将反映这一点。它还使用 gulp ^4.0。但是，经过一些修改，它应该可以与旧版本的 ASP.NET Core、Gulp、NodeJS 一起使用，并且也可以在没有 Docker 的情况下使用。

但这里有一个答案：

gulpfile.js see the real working exmple here

// 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 文件中添加 Target。请注意，如果我们利用 dotnet run watch 命令，我们还添加了一个 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 运行时，它还将安装和构建节点模块。

---