如何在 ASP.NET Core 中使用 npm

Question

我正在使用 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 将这些包恢复到与项目目录中 wwwroot 同级的 node_modules 文件夹中：

由于 ASP.NET Core 提供 wwwroot 文件夹中的静态文件，而 node_modules 不存在，我必须进行一些更改才能使其正常工作，第一个：在 app.UseStaticFiles 之前添加 app.UseFileServer我的 Startup.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 应用服务实例时也有效，jquery、bootstrap 和 font-awesome 静态文件得到了很好的服务，但我不确定这个实现。

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

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

任何建议将不胜感激。

Answer 1

通过发布整个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"]);

Answer 2

• 使用npm 管理客户端库是一个不错的选择（相对于 Bower 或 NuGet），您的想法是正确的 :)
• 将服务器端 (ASP.NET Core) 和客户端（例如 Angular 2、Ember、React）项目拆分到单独的文件夹中（否则您的 ASP.NET 项目可能有很多噪音 - 客户端的单元测试代码、node_modules 文件夹、构建工件等）。与您在同一个团队中工作的前端开发人员会为此感谢您:)
• 在解决方案级别恢复 npm 模块（类似于通过 NuGet 恢复包的方式 - 不是到项目的文件夹中），这样您也可以在单独的文件夹中进行单元和集成测试（而不是使用客户端 JavaScript在 ASP.NET Core 项目中进行测试）。
• 使用可能不需要FileServer，拥有StaticFiles 应该足以提供静态文件（.js、图像等）
• 使用 Webpack 将您的客户端代码打包成一个或多个块（包）
• You might not need Gulp/Grunt 如果您使用的是 Webpack 等模块捆绑器
• 使用 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（免责声明：我是作者）

Answer 3

将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 中

只有每次保存时都会运行它的副作用（但您可以将其设置为手动运行）

Answer 4

我给你两个答案。 npm 与其他工具结合使用非常强大，但需要进行一些设置工作。如果您只想下载一些库，则可能需要使用 Library Manager（在 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。

Answer 5

您也可以使用 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

Answer 6

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

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

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

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

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

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

app.UseStaticFiles();

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

Answer 7

更简单的方法是使用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 课程中了解到的。

Answer 8

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

文章链接到 GitHub 上的 gulpfile，他在该文件中实施了文章中的策略。您可以将大部分 gulpfile 内容复制并粘贴到您的文件中，但请务必在 devDependencies 下的 package.json 中添加适当的包： 吞咽 吞咽丑化 吞咽连接 边缘 合并流

Answer 9

我找到了一种更好的方法来使用 NPM Gulp/Grunt 任务运行器在我的项目中管理 JS 包。我不喜欢有一个带有另一层 javascript 库的 NPM 来处理“自动化”的想法，我的首要要求是简单地运行 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 工具）使我的项目保持简洁。

python方式：

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

Answer 10

请原谅这篇文章的长度。

这是一个使用 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。请注意，我们还添加了一个 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 运行时，它还将安装和构建节点模块。