如何在ASP.NET Core中使用npm [英] How to use npm with ASP.NET Core
问题描述
我使用npm来管理我的ASP.NET Core应用程序需要的jQuery，Bootstrap，Font Awesome和类似的客户端库。
对于我来说，通过向项目添加package.json文件开始，它看起来像这样：
{
version ：1.0.0，
name：myapp，
private：true，
devDependencies：{
}，
依赖关系：{
bootstrap：^ 3.3.6，
font-awesome：^ 4.6.1，
jquery：^ 2.2.3
npm将这些包恢复到所在的node_modules文件夹中与项目目录中的wwwroot相同级别：
由于ASP.NET Core服务于wwwroot文件夹中的静态文件，并且node_modules不在那里，我不得不做出一些更改第一个：在我的Startup.cs文件的app.UseStaticFiles之前添加app.UseFileServer：
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外部提供这些文件。
任何意见将不胜感激。
解决方案通过发布整个 node_modules 比你在制作中实际需要的文件要多得多。
相反，使用任务运行器作为构建过程的一部分来打包所需的文件，并将它们部署到 wwwroot 文件夹。这也将允许您同时连接并缩小资产，而不必分别为每个单独的库提供服务。
然后，您也可以完全移除 FileServer 配置，并依靠 UseStaticFiles 代替。
目前，gulp是VS任务的选择。将 gulpfile.js 添加到项目的根目录，并将其配置为在发布时处理您的静态文件。例如，您可以将以下脚本部分添加到 project.json / code>：
scripts：{
prepublish：[npm install， bower install，gulp clean，gulp min]
}，
这可以与下面的gulp文件一起使用（当脚手架使用 yo 时）：
///< binding Clean ='clean'/>
使用严格;
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]）;
$ b $ 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]）;
I'm using npm to manage the jQuery, Bootstrap, Font Awesome and similar client libraries I need for my ASP.NET Core application.
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 restores these packages into the node_modules folder which is on the same level as wwwroot in the project directory:
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();
and the second one, including node_modules in my publishOptions in the project.json file:
"publishOptions": {
"include": [
"web.config",
"wwwroot",
"Views",
"node_modules"
]
},
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?
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.
Any advice will be greatly appreciated.
解决方案 By publishing your whole node_modules folder you are deploying far more files than you will actually need in production.
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.
You can then also completely remove the FileServer configuration and rely on UseStaticFiles instead.
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.
For example, you can add the following scripts section to your project.json:
"scripts": {
"prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
},
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屋！
