他の人がすでに述べたように、重いクライアント側スクリプトに依存しないアプリケーションでこのような依存関係に通常使用されるパッケージマネージャーBowerは、他のソリューションに移行することを積極的に推奨しています。
..psst！Bowerのメンテナンス中は、新しいフロントエンドプロジェクトには糸とウェブパックをお勧めします！
そのため、今でも使用できますが、Bootstrapはサポートを終了することも発表しています。その結果、組み込みのASP.NET Coreテンプレートは徐々に編集され、そこから遠ざかっています。
残念ながら、明確な道はありません。これは主に、Webアプリケーションがクライアント側に継続的に移行しており、複雑なクライアント側のビルドシステムと多くの依存関係が必要であることによるものです。したがって、そのようなものを構築している場合は、これを解決する方法をすでに知っている可能性があり、既存のビルドプロセスを拡張して、そこにBootstrapとjQueryを含めることもできます。
しかし、クライアント側ではそれほど重くない多くのWebアプリケーションがまだ存在します。アプリケーションは依然として主にサーバー上で実行され、サーバーは結果として静的ビューを提供します。以前Bowerは、それほど多くのプロセスなしでクライアント側の依存関係を公開することを簡単にすることでこれを満たしていました。
.NETの世界ではNuGetもあり、以前のASP.NETバージョンでは、NuGetを使用してコンテンツをプロジェクトに正しく配置するため、NuGetを使用してクライアント側の依存関係に依存関係を追加することもできました。残念ながら、新しい.csproj形式と新しいNuGetでは、インストールされたパッケージはプロジェクトの外部にあるため、単純にそれらを参照することはできません。
これにより、依存関係を追加する方法がいくつかあります。
ワンタイムインストール
これは、単一ページアプリケーションではないASP.NET Coreテンプレートが現在行っていることです。これらを使用して新しいアプリケーションを作成するwwwrootと、フォルダーlibには依存関係を含むフォルダーが含まれます。
現在ファイルを注意深く見ると、元々Bowerでテンプレートを作成するためにそこに配置されていたことがわかりますが、すぐに変更される可能性があります。基本的な考え方は、ファイルは一度wwwrootフォルダーにコピーされるため、ファイルに依存できるということです。
これを行うには、Bootstrapの概要に従って、コンパイル済みファイルを直接ダウンロードします。ダウンロードサイトで述べたように、これにはjQueryが含まれていないため、これも個別にダウンロードする必要があります。Popper.js は含まれ ていますが、後でbootstrap.bundleファイルを使用する場合は、使用します。jQueryの場合、ダウンロードサイトから1つの「圧縮された本番」ファイルを取得するだけです（リンクを右クリックして、メニューから[名前を付けてリンクを保存...]を選択します）。
これにより、いくつかのファイルが残ります。これらのファイルは単純に抽出され、wwwrootフォルダーにコピーされます。libフォルダを作成して、これらが外部の依存関係であることを明確にすることもできます。
それだけで十分なので_Layout.cshtml、これらの依存関係を含めるようにファイルを調整するだけです。そのために、次のブロックをに追加します<head>。
<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>
そして、最後の次のブロック<body>：
<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>
縮小バージョンを含めて、<environment>ここでタグヘルパーをスキップして、少しシンプルにすることもできます。しかし、それを続けるために必要なのはこれだけです。
NPMからの依存関係
より最新の方法は、依存関係を更新したままにする場合も、NPMパッケージリポジトリから依存関係を取得することです。これには、NPMまたは糸を使用できます。この例では、NPMを使用します。
まずpackage.json、プロジェクトのファイルを作成して、依存関係を指定できるようにする必要があります。これを行うには、「新しい項目の追加」ダイアログから行うだけです。
それができたら、依存関係を含めるように編集する必要があります。次のようになります。
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
保存すると、Visual Studioは既にNPMを実行して依存関係をインストールします。それらはnode_modulesフォルダにインストールされます。あとはファイルをそこからwwwrootフォルダに入れるだけです。それにはいくつかのオプションがあります。
bundleconfig.json バンドリングとミニファイ用
ドキュメントでbundleconfig.json説明されているように、さまざまな方法の1つを使用して、をバンドルおよびミニファイするために使用できます。非常に簡単な方法は、このためのビルドタスクを自動的に設定するBuildBundlerMinifier NuGetパッケージを使用することです。
そのパッケージをインストールしたら、bundleconfig.jsonプロジェクトのルートに次の内容のを作成する必要があります。
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": { "enabled": false }
}
]
これは基本的にどのファイルを何に結合するかを設定します。ビルドすると、vendor.min.cssおよびvendor.js.cssが正しく作成されていることがわかります。したがって_Layouts.html、これらのファイルを含めるように再度調整するだけです。
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Gulpなどのタスクマネージャを使用する
クライアント側の開発にもう少し移動したい場合は、そこで使用するツールを使用することもできます。たとえば、Webpackは、非常に一般的に使用されるビルドツールであり、実際にすべてのものに使用されます。しかし、Gulpのような単純なタスクマネージャーから始めて、必要ないくつかの手順を自分で実行することもできます。
そのためにgulpfile.js、次の内容でa をプロジェクトルートに追加します。
const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('build-vendor-css', () => {
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));
gulp.task('default', gulp.series('build-vendor'));
次に、およびにpackage.json依存するように調整する必要があります。gulpgulp-concat
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
最後に、.csproj次のタスクを追加するように編集して、プロジェクトをビルドするときにGulpタスクが確実に実行されるようにします。
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
これで、ビルドするとdefaultGulpタスクが実行され、タスクが実行されます。これによりbuild-vendor、以前vendor.min.cssとvendor.min.js同じようにビルドされます。_Layout.cshtml上記のように調整したら、jQueryとBootstrapを利用できます。
Gulpの初期設定はbundleconfig.json上記のものより少し複雑ですが、これでNode-worldに入り、他のすべてのクールなツールを利用できるようになりました。だから、これから始める価値があるかもしれません。
結論
これは突然Bowerを使用するよりもはるかに複雑になりましたが、これらの新しいオプションを使用して多くの制御を得ることができます。たとえば、wwwrootフォルダに実際に含まれるファイルと、それらがどのように見えるかを決定できます。また、これを使用して、少なくとも学習曲線で少しは役立つはずのNodeを使用して、クライアント側開発の世界に最初に移動することもできます。
