如何在 ASP.NET Core 中使用 npm [英] How to use npm with ASP.NET Core

问题描述

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

I'm using npm to manage the jQuery, Bootstrap, Font Awesome and similar client libraries I need for my ASP.NET Core application.

对我有用的方法是在项目中添加一个 package.json 文件，如下所示:

The approach that worked for me started by adding a package.json file to the project, that looks like this:

{
    "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 文件夹中:

npm restores these packages into the node_modules folder which is on the same level as wwwroot in the project directory:

由于 ASP.NET Core 提供来自 wwwroot 文件夹的静态文件，而 node_modules 不存在，我必须进行一些更改才能使其正常工作，第一个:在 app.UseStaticFiles 之前添加 app.UseFileServer我的 Startup.cs 文件:

As ASP.NET Core serves the static files from the wwwroot folder, and node_modules is not there, I had to make a couple of changes to make this work, the first one: adding app.UseFileServer right before app.UseStaticFiles in my Startup.cs file:

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:

and the second one, including node_modules in my publishOptions in the project.json file:

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

这在我的开发环境中有效，当我将它部署到我的 Azure 应用服务实例时也有效，jquery、bootstrap 和 font-awesome 静态文件得到了很好的服务，但我不确定这个实现.

This works in my development environment and it also works when I deploy it to my Azure App Service instance, the jquery, bootstrap and font-awesome static files get served well, but I'm not sure about this implementation.

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

What is the right approach for doing this?

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

This solution came after collecting lots of bits of info from several sources and trying some that didn't work, and it seems a bit odd having to serve these files from outside wwwroot.

任何建议将不胜感激.

推荐答案

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

By publishing your whole node_modules folder you are deploying far more files than you will actually need in production.

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

Instead, use a task runner as part of your build process to package up those files you require, and deploy them to your wwwroot folder. This will also allow you to concat and minify your assets at the same time, rather than having to serve each individual library separately.

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

You can then also completely remove the FileServer configuration and rely on UseStaticFiles instead.

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

Currently, gulp is the VS task runner of choice. Add a gulpfile.js to the root of your project, and configure it to process your static files on publish.

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

For example, you can add the following scripts section to your project.json:

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

这将与以下 gulpfile 一起使用(使用 yo 搭建脚手架时的默认设置):

Which would work with the following gulpfile (the default when scaffolding with 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"]);

这篇关于如何在 ASP.NET Core 中使用 npm的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！