サーチ…


前書き

公式文書によると:

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

お気に入りのフレームワークを選択してください

ここに画像の説明を入力



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow