ASP.NET Coreアプリケーションに必要なjQuery、Bootstrap、Font Awesomeなどのクライアントライブラリを管理するためにnpmを使用しています。

私にとってうまくいったアプローチは、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を追加することです。 csファイル：

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

2つ目は、project.jsonファイルのpublishOptionsにnode_modulesを含めます。

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

これは私の開発環境で機能し、Azure App Serviceインスタンスにデプロイすると機能します。jquery、ブートストラップ、font-awesome静的ファイルが適切に処理されますが、この実装についてはよくわかりません。

これを行うための正しいアプローチは何ですか？

この解決策は、いくつかのソースから多くの情報を収集し、機能しないものを試してみた結果であり、wwwrootの外部からこれらのファイルを提供しなければならないのは少し奇妙に思われます。

どんなアドバイスでも大歓迎です。

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"]);

• 使用する npm（BowerやNuGetとは対照的に）クライアント側ライブラリの管理にするのは良い選択です。正しい方向に考えているでしょう:)
• サーバー側（ASP.NET Core）とクライアント側（Angular 2、Ember、Reactなど）のプロジェクトを別々のフォルダーに分割します（そうしないと、ASP.NETプロジェクトに多くのノイズが含まれる可能性があります-クライアント側コードの単体テスト、node_modulesフォルダ、アーティファクトの構築など）。あなたと同じチームで作業するフロントエンド開発者は、それを感謝します:)
• ソリューションレベルでnpmモジュールを復元します（同様に、プロジェクトのフォルダーではなく、NuGetを介してパッケージを復元する方法）。これにより、ユニットテストと統合テストを別のフォルダーに含めることもできます（クライアント側のJavaScriptテストをASP.NET Coreプロジェクト）。
• 使用は必要ないかもしれませんがFileServer、StaticFiles静的ファイル（.jsファイル、画像など）を提供するのに十分であるべき
• Webpackを使用してクライアント側のコードを1つ以上のチャンク（バンドル）にバンドルする
• Webpackなどのモジュールバンドルを使用している場合は、Gulp / Gruntは必要ない場合があります
• ES2015 + JavaScript（BashやPowerShellではなく）でビルド自動化スクリプトを記述します。それらはクロスプラットフォームで動作し、さまざまなWeb開発者がアクセスしやすくなります（現在、誰もがJavaScriptを使用しています）。
• 名前wwwrootをpublicに変更します。そうしないと、Azure Web Appsのフォルダー構造がわかりにくくなります（D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public）。
• コンパイルされた出力のみをAzure Web Appsにnode_modules公開します（Webホスティングサーバーにプッシュしないでください）。tools/deploy.js例として見てください。

GitHubのASP.NET Core Starter Kitにアクセスしてください（免責事項：私は作成者です）

BundlerとMinifierをインストールするをVisual Studio Extensionsに

次に、を作成し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に配置します。

保存するたびに副作用のみがこれを実行します（ただし、手動で実行するように設定できます）

私はあなたに二つの答えを与えます。他のツールと組み合わせたnpmは強力ですが、セットアップにはいくつかの作業が必要です。一部のライブラリをダウンロードするだけの場合は、ライブラリマネージャーを使用することをお勧めします代わりに（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という名前のフォルダーにダウンロードします。次のステップは、ファイルを適切な場所にコピーすることです。これを行うには、NPMによってダウンロードされたgulpを使用します。次に、プロジェクトのルートに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も更新してください。

ノードモジュールフォルダを提供する代わりに、Gulpを使用して必要なものをwwwrootにコピーすることもできます。

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

これも役立つかもしれません

Visual Studio 2015 ASP.NET 5、Gulpタスクがnode_modulesからファイルをコピーしない

これを行うための正しいアプローチは何ですか？

「正しい」アプローチはたくさんありますが、ニーズに合った最適なスイートを決定するだけです。使い方を誤解しているようnode_modulesです...

NuGetに精通している場合は、npmをクライアント側の対応物と考える必要があります。ここで、node_modulesディレクトリはNuGetのbinディレクトリに似ています。アイデアは、このディレクトリはパッケージを保存するための一般的な場所にすぎないということです。私の意見では、必要なパッケージをで行うのが良いと思います。次に、たとえばのようなタスクランナーを使用して、必要なファイルを目的の場所にコピーします。dependencypackage.jsonGulpwwwroot

私はこれについて1月にブログに記事を書き、npm、Gulp、および現在も関連のあるその他の詳細をまとめています。さらに、誰かが私が尋ねた私のSOの質問に注意を喚起し、最終的にここで自分に回答しました。これはおそらく役立つでしょう。

例としてGistを示すを作成しましたgulpfile.js。

あなたの中でStartup.csそれはまだ静的ファイルを使用することが重要です：

app.UseStaticFiles();

これにより、アプリケーションが必要なものにアクセスできるようになります。

より簡単な方法は、OdeToCode.UseNodeModules Nugetパッケージを使用することです。.Net Core 3.0でテストしました。必要なのは、パッケージをソリューションに追加し、StartupクラスのConfigureメソッドで参照することだけです。

app.UseNodeModules();

Shawn WildermuthによるASP.NET Core、MVC、Entity Framework Core、Bootstrap、およびAngular Pluralsightコースでの優れたWebアプリの構築から、それについて学びました。

Shawn Wildermuthはここに素晴らしいガイドがあります：https ://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

この記事は、GitHubのgulpfileにリンクしており、彼はこの記事で戦略を実装しています。ほとんどのgulpfileコンテンツをコピーして自分のコンテンツに貼り付けることができますが、適切なパッケージをdevDependenciesの下のpackage.jsonに追加してください。gulp gulp-uglify gulp-concat rimraf merge-stream

NPM Gulp / Gruntタスクランナーでプロジェクト内のJSパッケージを管理するより良い方法を見つけました。「自動化」を処理するためにJavaScriptライブラリーの別のレイヤーを備えたNPMを持つのは好きではありません。私の一番の要件は、gulpを実行する必要があるかどうかについて他の心配をせずにnpm更新を単純に実行することです。すべてが正常にコピーされた場合、またはその逆の場合。

NPMの方法：

• JS minifierはASP.netコアに既にバンドルされています。bundleconfig.jsonを探してください。これは私にとって問題ではありません（カスタム何かをコンパイルしない）
• NPMの良い点は、ファイル構造が適切であるため、node_modules / module / distの下にある依存関係のプリコンパイル/縮小バージョンを常に見つけられることです。
• Project / wwwroot / lib / module / dist / .jsファイルのcopy / update / deleteを処理するNPM node_modules / .hooks / {eventname}スクリプトを使用しています。ドキュメントはこちらhttps：// docs.npmjs.com/misc/scripts（Gitに使用しているスクリプトをさらに洗練されたら更新します）追加のタスクランナーは必要ありません（好きではない.jsツール）プロジェクトをクリーンでシンプルに保つもの

Pythonの方法：

https://pypi.python.org/pyp ...しかし、この場合、ソースを手動で維持する必要があります

この投稿の長さをお許しください。

これはASP.NET Coreバージョン2.5を使用した実際の例です。

注目すべき点は、project.jsonは廃止され（ここを参照）、. csprojが採用されていることです。.csprojの問題。ファイルは大量の機能であり、ドキュメントの中心的な場所がないという事実（ここを参照）。

さらに、この例では、Docker Linux（alpine 3.9）コンテナーでASP.NETコアを実行しています。パスはそれを反映します。gulp ^ 4.0も使用します。ただし、多少の変更を加えると、ASP.NET Core、Gulp、NodeJSの古いバージョンで動作し、Dockerがなくても動作するはずです。

しかし、ここに答えがあります：

gulpfile.js は、実際に動作する例をここに示します

// 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ファイルにターゲットを追加します。監視を追加して、コマンドを利用する場合は監視と除外を行うことに注意してください。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実行すると、ノードモジュールもインストールおよびビルドされます。