ASP.NET Coreでnpmを使用する方法
私は私の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はそこにはないので、この作業を行うためにいくつか変更を加えなければなりませんでした。 csファイル：
app.UseFileServer(new FileServerOptions()
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")),
RequestPath = new PathString("/node_modules"),
EnableDirectoryBrowsing = true
});
app.UseStaticFiles();
もう1つは、project.jsonファイルのpublishOptionsにあるnode_modulesを含みます。
"publishOptions": {
"include": [
"web.config",
"wwwroot",
"Views",
"node_modules"
]
},
これは私の開発環境でも動作しますし、それを私のAzure App Serviceインスタンスにデプロイしたときにも動作します。jquery、ブートストラップ、フォントが素晴らしい静的ファイルはうまく機能しますが、この実装についてはよくわかりません。
これを行うための正しいアプローチは何ですか？
この解決策は、いくつかのソースから大量の情報を収集し、機能しないものをいくつか試してみた結果です。これらのファイルを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を介してパッケージを復元するのと同じ方法です）。この方法で、ユニット内と統合テストを別のフォルダーに保存することもできます。 ASP.NET Coreプロジェクト）.
FileServerを使用する必要はないかもしれません。静的ファイル（.js、画像など）を提供するにはStaticFilesで十分であるはずです。- Webpackを使用して、クライアントサイドのコードを1つ以上のチャンク（バンドル）にまとめる
- あなたがGulp/Gruntを必要としないかもしれません もしあなたがWebpackのようなモジュールバンドラーを使っているならば
- 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をWebホスティングサーバーにプッシュしないでください）。例としてtools/deploy.jsを参照してください。
GitHubでASP.NET Core Starter Kitにアクセスしてください（免責事項：私は著者です）。
Visual Studio Extensionsに Bundler and Minifier をインストールします。
それから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他のツールと組み合わせることは強力ですが、セットアップするためにいくらかの作業が必要です。単にいくつかのライブラリをダウンロードしたい場合は、代わりにLibrary Managerを使用することをお勧めします（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コアプロジェクトで使用されるブートストラップ、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/ja-jp/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1
ライブラリマネージャ（シンプル）
プロジェクトを右クリックしてクライアントサイドライブラリの管理を選択します。ファイルlibman.jsonが開きます。このファイルでは、使用するライブラリとファイル、およびそれらをローカルに保存する場所を指定します。本当に簡単！次のファイルは、新しいASP.NET Core 2.1プロジェクトを作成するときに使用される既定のライブラリをコピーします。
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
"destination": "wwwroot/lib/jquery/dist/"
},
{
"library": "[email protected]",
"files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
"destination": "wwwroot/lib/jquery-validation/dist/"
},
{
"library": "[email protected]",
"files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
"destination": "wwwroot/lib/jquery-validation-unobtrusive/"
},
{
"library": "[email protected]",
"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": "[email protected]",
"files": [ "list.js", "list.min.js" ],
"destination": "wwwroot/lib/listjs"
}
]
}
ファイルを移動する場合は、必ず_ Layout.cshtmlも更新してください。
Node modulesフォルダを提供する代わりに、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ディレクトリに似ています。このディレクトリはパッケージを格納するための単なる一般的な場所であるという考えがあります。私の意見では、package.jsonで行ったように、必要なパッケージにdependencyを付けることをお勧めします。それから、 Gulp のようなタスクランナーを使って、必要なファイルを希望するwwwrootの場所にコピーします。
私は ブログ記事 1月にこのことについて書きました。詳細npm、Gulpおよび今日でもまだ関連している他の詳細の全体。さらに、誰かが私が尋ねた私のSO質問に注意を呼び、最終的に私自身に答えました ここ 、これはおそらく役に立ちます。
例としてgulpfile.jsを示す Gist を作成しました。
あなたのStartup.csでは、静的なファイルを使うことがまだ重要です：
app.UseStaticFiles();
これにより、アプリケーションは必要なものに確実にアクセスできるようになります。
Shawn Wildermuthはここにいいガイドを持っています： https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower
この記事はGitHubのgulpfileにリンクしていて、そこで彼は記事の中で戦略を実行しました。 gulpfileの内容の大部分をコピーして自分のものに貼り付けることができますが、適切なパッケージをpackage.jsonのdevDependenciesの下に追加してください。gulp gulp-uglify gulp-concat rimraf merge-stream
私はNPM Gulp/Gruntタスクランナーを使ってプロジェクト内のJSパッケージを管理する方法を見つけました。私は「自動化」を処理するために別のJavascriptライブラリーの層を持つNPMを持っているという考えが嫌いです。それがすべてのコピーに成功した場合、またその逆の場合も同様です。
NPMのやり方
- JS minifierはすでにASP.netコアにバンドルされています。bundleconfig.jsonを探してください。これは私にとって問題ではありません（カスタム何かをコンパイルするのではありません）。
- NPMの良いところは、良いファイル構造を持っているということです。そのため、node_modules/module/distの下に、事前にコンパイル/縮小された依存関係のバージョンを見つけることができます。
- Project/wwwroot/lib/module/dist /.jsファイルのコピー/更新/削除を処理している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に関する問題。 fileは大量の機能であり、そのドキュメントの中心となる場所はありません（ こちらを参照 ）。
もう1つ重要なのは、この例では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ファイルにTargetを追加します。 dotnet run watchコマンドを利用するかどうかを監視および除外するためのWatchも追加されています。
<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が実行されると、ノードモジュールもインストールしてビルドします。