asp.net-core
JavascriptServices로 작업하기

소개

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를 사용 aspnetcore-spa asp.net 코어로 완전히 새로운 단일 페이지 응용 프로그램을 만들 수 있습니다.

이를 통해 널리 사용되는 프론트 엔드 프레임 워크 중 하나를 선택하고 webpack, dev 서버, 핫 모듈 교체 및 서버 측 렌더링 기능으로 프로젝트를 생성 할 수 있습니다.

그냥 실행

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

좋아하는 프레임 워크를 선택하십시오.