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

여기에서 파일을 바꾸려면 hmr로 설정된 경우 hmrBootStrap을 호출하여 웹 페이지를 시작해야 합니다. 과거를 사용하세요

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

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

관련 기사:

AJAX XMLHttpRequest 객체 자세한 설명

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

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

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