c# - 如何在 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 文件夹中。这也将允许您同时合并和缩小您的 Assets ，而不必分别为每个单独的库提供服务。

然后您还可以完全删除 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"]);