如何在ASP.NET Core中使用npm

我使用npm来pipe理我的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不存在，所以我不得不作出一些更改以使其工作，第一个：在我的Startup中的app.UseStaticFiles之前添加app.UseFileServer。 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，引导和字体真棒静态文件得到良好的服务，但我不知道这个实现。

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

这个解决scheme在收集了很多来自多个源的信息之后，尝试了一些不起作用的东西，似乎有点奇怪，从wwwroot的外部提供这些文件。

任何意见将不胜感激。

Answer 1

通过发布您的整个node_modules文件夹，您将部署的文件远远超出实际需要的产品数量。

相反，使用任务运行器作为构build过程的一部分来打包所需的文件，并将其部署到您的wwwroot文件夹。 这也可以让你同时连接和缩小你的资产，而不必分别服务于每个单独的图书馆。

然后，您也可以完全删除FileServerconfiguration，并在UseStaticFiles回复。

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

例如，您可以将以下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

• 使用npmpipe理客户端库是一个不错的select（相对于Bower或NuGet），你正在考虑正确的方向:)
• 将服务器端（ASP.NET Core）和客户端（例如Angular 2，Ember，React）分离到不同的文件夹中（否则你的ASP.NET项目可能会有很多噪音 – 客户端代码的unit testing，node_modules文件夹，构build文物等）。 与你在同一个团队工作的前端开发人员会感谢你:)
• 在解决scheme级别还原npm模块（类似于如何通过NuGet恢复软件包，而不是通过项目文件夹），这样，您可以在单独的文件夹中进行unit testing和集成testing（而不是在客户端进行JavaScripttestingASP.NET核心项目）。
• 使用可能不需要FileServer ， StaticFiles应该足以提供静态文件（.js，图像等）
• 使用Webpack将客户端代码绑定到一个或多个块（捆绑）
• 如果您使用Webpack等模块打包程序，则可能不需要Gulp / Grunt
• 在ES2015 + JavaScript（而不是Bash或PowerShell）中编写自动化脚本，他们将跨平台工作，更容易被各种Web开发人员访问（现在每个人都在说JavaScript）
• 将wwwroot重命名为public ，否则Azure Web Apps中的文件夹结构将会混淆（ D:\Home\site\wwwroot\wwwroot与D:\Home\site\wwwroot\public ）
• 只发布编译的输出到Azure Web Apps（你不应该把node_modules推到一个虚拟主机服务器上）。 以tools/deploy.js为例。

访问GitHub上的ASP.NET核心入门套件 （免责声明：我是作者）

Answer 3

不要尝试提供节点模块文件夹，也可以使用Gulp将需要的文件复制到wwwroot。

https://docs.asp.net/en/latest/client-side/using-gulp.html

这也可能有帮助

Visual Studio 2015 ASP.NET 5，Gulp任务不复制node_modules中的文件

Answer 4

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

有很多“正确”的方法，你只是决定哪一个最适合您的需求。 看起来好像你误解了如何使用node_modules …

如果你对NuGet很熟悉，你应该把npm当作客户端的对手。 其中node_modules目录与NuGet的bin目录相似。 这个想法是，这个目录只是一个存储包的常用位置，在我看来，最好是像在package.json一样， dependency于你需要的package.json 。 然后使用像Gulp这样的任务运行者来将您需要的文件复制到您想要的wwwroot位置。

今年1月份，我写了一篇博文 ，详细介绍了npm ， gulp以及其他一些今天仍然相关的细节。 此外，有人呼吁关注我提出的问题，并最终在这里回答自己，这可能是有帮助的。

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

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

 app.UseStaticFiles(); 

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

Answer 5

将Bundler和Minifier安装到Visual Studio扩展中

然后你创build一个bundleconfig.json并input如下所示：

 // 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 } ] 

因此，bundler和minifier（基于gulp）可以访问源文件（这些文件应该从Visual Studio中排除，也可以从GIT中排除），并按照指定将它们放入wwwroot中

只有副作用，每次你保存它会运行这个（或者你可以设置它或手动运行）