Szukaj…


Wprowadzenie

Według oficjalnej dokumentacji:

JavaScriptServices to zestaw technologii dla programistów ASP.NET Core. Zapewnia infrastrukturę, która okaże się przydatna, jeśli użyjesz Angular 2 / React / Knockout / itp. Na kliencie lub jeśli zbudujesz zasoby po stronie klienta za pomocą pakietu Webpack lub w inny sposób chcesz uruchomić JavaScript na serwerze w czasie wykonywania.

Włączanie webpack-dev-middleware dla projektu asp.net-core

Załóżmy, że używasz Webpack do pakietowania w interfejsie użytkownika. Możesz dodać webpack-dev-middleware aby obsługiwać swoją statystykę za pośrednictwem małego i szybkiego serwera. Umożliwia automatyczne ponowne ładowanie zasobów, gdy zawartość się zmieni, służy do statyki w pamięci bez ciągłego zapisywania wersji pośrednich na dysku.

Wymagania wstępne

NuGet

Zainstaluj pakiet Microsoft.AspNetCore.SpaServices

npm

instalacja npm --save-dev aspnet-webpack, webpack-dev-middleware, webpack-dev-server

Konfiguracja

Rozszerz metodę Configure w swojej klasie Startup

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

Dodaj wymianę modułu na gorąco (HMR)

Wymiana modułu na gorąco pozwala dodawać, zmieniać lub usuwać moduł aplikacji podczas działania aplikacji. W takim przypadku ponowne ładowanie strony nie jest konieczne.

Wymagania wstępne

Oprócz pakietów webpack-dev-middleware :

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

Konfiguracja

Po prostu zaktualizuj konfigurację UseWebpackDevMiddleware o nowe opcje:

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

Musisz także zaakceptować gorące moduły w kodzie aplikacji.

HMR jest obsługiwany w Angular 2, React, Knockout i Vue.

Generowanie przykładowej aplikacji jednostronicowej z rdzeniem asp.net

Możesz użyć generatora aspnetcore-spa dla Yeoman aby stworzyć nową, jednostronicową aplikację z rdzeniem asp.net.

Pozwala to wybrać jedną z popularnych frameworków i generuje projekt z pakietem webpack, serwerem deweloperskim, funkcją wymiany modułów i renderowania po stronie serwera.

Po prostu biegnij

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

i wybierz swoje ulubione ramy

wprowadź opis zdjęcia tutaj



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow