asp.net-core
JavascriptServicesで作業する
サーチ…
前書き
公式文書によると:
JavaScriptServices
は、ASP.NETコア開発者向けの一連のテクノロジです。クライアント上でAngular 2 / React / Knockout /などを使用する場合や、Webpackを使用してクライアント側のリソースを構築する場合、または実行時にサーバー上でJavaScriptを実行する場合に役立つインフラストラクチャを提供します。
asp.net-coreプロジェクト用のwebpack-dev-middlewareの有効化
フロントエンドバンドリングにWebpack
を使用しているとします。 webpack-dev-middleware
を追加して、小型で高速なサーバー経由で静的なサービスを提供できます。これにより、コンテンツが変更されたときに資産を自動的にリロードし、中間バージョンをディスクに書き込むことなくメモリ内で静的なサービスを提供できます。
前提条件
NuGet
インストールパッケージMicrosoft.AspNetCore.SpaServices
npm
npm install --save-dev aspnet-webpack、webpack-dev-middleware、webpack-dev-server
設定
Startup
クラスのConfigure
メソッドを拡張する
if (env.IsDevelopment())
{
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
{
ConfigFile = "webpack.config.js" //this is defualt value
});
}
ホットモジュール交換(HMR)を追加
ホットモジュール置換は、アプリケーションの実行中にアプリケーションモジュールの追加、変更、または削除を可能にします。この場合、ページの再読み込みは必要ありません。
前提条件
webpack-dev-middleware
パッケージに加えて:
npm install --save-dev webpack-hot-middleware
構成
UseWebpackDevMiddleware
設定を新しいオプションで更新するだけです:
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
{
ConfigFile = "webpack.config.js", //this is defualt value
HotModuleReplacement = true,
ReactHotModuleReplacement = true, //for React only
});
また、あなたのアプリケーションコードでホットモジュールを受け入れる必要があります。
HMRはAngular 2、React、Knockout、Vueに対応しています。
asp.netコアを使用したサンプルの単一ページアプリケーションの生成
Yeoman
aspnetcore-spa
generatorを使用して、asp.netコアで真新しいシングルページアプリケーションを作成することができます。
これにより、一般的なフロントエンドフレームワークの1つを選択し、webpack、devサーバー、ホットモジュールの置き換え、サーバー側のレンダリング機能でプロジェクトを生成することができます。
とにかく走れ
npm install -g yo generator-aspnetcore-spa
cd newproject
yo aspnetcore-spa
お気に入りのフレームワークを選択してください