Angular HMR(핫 모듈 교체) 기능 구현 방법

이 글은 주로 Angular HMR(핫 모듈 교체) 기능의 구현 방법을 소개합니다. 내용이 꽤 좋아서 지금 공유해 보겠습니다.

최근 동료가 Angular를 사용하면서 VUE와 같은 기능을 원했는데, 코드를 수정해도 브라우저가 새로 고침되지 않고 수정된 구성 요소에 따라 페이지가 자동으로 업데이트됩니다. 이 기능의 이름은 HMR(hot module replacement)입니다.

약간의 조사 끝에 각도/cli로 만든 프로젝트에서 이를 구현하는 것이 그리 어렵지 않다는 것을 알았습니다. 단계는 다음과 같습니다.

#🎜🎜 #1. 먼저 src/environments/environment.hmr.ts 파일을 생성합니다. 내용은 다음과 같습니다. # 물론, 해당 환경.prod.ts 및 Environment.ts에는 hmr:false를 추가해야 합니다.

environment.ts의 hmr이 true로 설정된 경우 ng Serve --hmr은 같은 효과. 하지만 핫 교체 기능에 대해서는 그다지 확신이 없어서 환경을 새로 고치면 환경이 더 깨끗해질 수 있습니다.

2. -대략 다음과 같이 -cli.json 파일의 환경에 HMR 환경을 추가합니다. . 패키지에서 json 스크립트에 새 명령을 추가합니다. (물론 추가하지 않고 직접 ng Serve --hmr -e=hmr 을 실행할 수도 있는데 이는 npm run hmr 을 실행하는 것과 같은 효과가 있습니다.) #

4 hmr 모듈을 설치합니다. 명령은 다음과 같습니다. :

export const environment = {
 production: false,
 hmr: true
};

5 srchmr.ts 파일을 생성합니다. 내용은 다음과 같습니다.
# 🎜🎜#

"environments": {
 ...
 "hmr": "environments/environment.hmr.ts",
}

이것이 핫 교체의 핵심입니다. hmrBootstrap은 원래 부트스트랩을 교체하고(아래 참조) 나중에 새 모듈이 있으면 교체합니다. 업데이트되면 HMR은 먼저 기존 모듈을 제거한 다음 새 모듈을 받습니다. 이 모든 일은 브라우저에서 발생합니다. 따라서 페이지가 새로 고쳐지지 않습니다.

6. srcmain.ts 파일을 다음과 같이 업데이트합니다.

"scripts": {
 ...
 "hmr": "ng serve --hmr -e=hmr"
}

#🎜 🎜# 여기를 바꾸려면 파일을 시작해야 합니다. hmr로 설정된 경우 hmrBootStrap을 호출하여 웹 페이지를 시작하고, 그렇지 않으면 과거

7을 사용합니다. hmr 또는 ng Serve --hmr - e=hmr을 실행하면 핫 교체 기능이 실현됩니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Angularjs의 $apply 및 최적화 사용 정보

#🎜 🎜 #VueJS 구성 요소는 props를 통해 상호 작용하고 확인합니다

위 내용은 Angular HMR(핫 모듈 교체) 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!