Angular HMR(hot module replacement) 기능 구현 방법

이 글에서는 주로 Angular HMR(핫 모듈 교체) 기능의 구현 방법을 소개하고 참고용으로 공유합니다.

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

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

1 먼저 src/environments/environment.hmr.ts를 만듭니다. 다음 콘텐츠가 포함된 파일

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

물론, 해당 환경.prod.ts 및 환경.ts는 hmr을 추가해야 합니다: false.

environment.ts의 hmr이 true로 설정된 경우 ng Serve --hmr은 동일한 효과를 갖습니다. 하지만 핫 교체 기능에 대해서는 그다지 확신이 없습니다. 브라우저를 새로 고치면 더 깨끗한 상태가 보장될 수 있으므로, Environment.ts에서 HMR을 false로 설정했습니다.

2. .angular-cli 환경에 추가합니다. hmr의 환경은 대략 다음과 같습니다.

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

3. package.json의 스크립트에 새 명령을 추가합니다. (물론 추가하지 않고 직접 실행할 수도 있습니다. npm run hmr을 실행하는 것과 효과는 동일합니다.)
5. 다음 내용으로 srchmr.ts 파일을 생성합니다.

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

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

6. srcmain.ts 파일을 다음과 같이 업데이트하세요.

npm install --save-dev @angularclass/hmr

7. 이제 npm run hmr 또는 ng Serve --hmr -e=hmr을 실행하여 핫 교체 기능을 구현하세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

AJAX XMLHttpRequest 객체 자세한 설명

Django 프레임워크는 ajax를 사용하여 일괄 가져오기 데이터 기능을 구현합니다.

ajax 비동기 로딩 이미지 예시 분석

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