asp.net-core
Mit JavascriptServices arbeiten

Einführung

Aktivieren der webpack-dev-Middleware für das asp.net-core-Projekt

Webpack , Sie verwenden Webpack für das Front-End-Bündeln. Sie können webpack-dev-middleware hinzufügen, um Ihre Statik über winzige und schnelle Server webpack-dev-middleware . Sie können Ihre Assets automatisch neu laden, wenn sich der Inhalt geändert hat, Statiken im Arbeitsspeicher bereitstellen, ohne Zwischenversionen kontinuierlich auf die Festplatte zu schreiben.

Voraussetzungen

NuGet

Installationspaket Microsoft.AspNetCore.SpaServices

npm

npm install --save-dev aspnet-webpack, webpack-dev-Middleware, webpack-dev-server

Konfigurieren

Erweitern Sie Configure - Methode in Ihrer Startup - Klasse

if (env.IsDevelopment())
{
     app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
     {
         ConfigFile = "webpack.config.js" //this is defualt value
     });
}

Hot Module Replacement (HMR) hinzufügen

Hot Module Replacement ermöglicht das Hinzufügen, Ändern oder Löschen eines App-Moduls, wenn die Anwendung ausgeführt wird. Ein erneutes Laden der Seite ist in diesem Fall nicht erforderlich.

Voraussetzungen

Neben webpack-dev-middleware Paketen:

npm install --save-dev webpack-hot-middleware

Aufbau

Aktualisieren Sie die Konfiguration von UseWebpackDevMiddleware mit neuen Optionen:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
{
    ConfigFile = "webpack.config.js", //this is defualt value
    HotModuleReplacement = true,
    ReactHotModuleReplacement = true, //for React only
});

Sie müssen auch heiße Module in Ihrem App-Code akzeptieren.

HMR wird für Angular 2, React, Knockout und Vue unterstützt.

Erstellen einer Beispielseitenanwendung mit asp.net core

Sie können den aspnetcore-spa Generator für Yeoman , um eine brandneue Einzelseitenanwendung mit asp.net core zu erstellen.

Auf diese Weise können Sie eines der beliebtesten Front-End-Frameworks auswählen und ein Projekt mit Funktionen für Webpack, Dev-Server, Hot-Module-Ersatz und serverseitige Rendering-Funktionen erstellen.

Renn einfach

npm install -g yo generator-aspnetcore-spa
cd newproject
yo aspnetcore-spa

und wählen Sie Ihren bevorzugten Rahmen