快捷導(dǎo)航

Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法

更新時(shí)間：2018年04月04日 16:45:27 作者：滅蒙鳥

本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近一個(gè)同事在使用Angular的時(shí)候，希望能像VUE那樣，修改代碼后瀏覽器不刷新，頁(yè)面對(duì)應(yīng)修改的組件自動(dòng)更新的功能。這個(gè)功能的名字時(shí)HMR (hot module replace)。

稍微研究了一下，發(fā)現(xiàn)在angular/cli創(chuàng)建的項(xiàng)目中，實(shí)現(xiàn)這個(gè)不算太難，步驟如下：

1、首先創(chuàng)建一個(gè)src/environments/environment.hmr.ts文件，內(nèi)容如下

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

當(dāng)然，對(duì)應(yīng)的environment.prod.ts和environment.ts需要增加一個(gè)hmr:false.

如果environment.ts里面的hmr設(shè)置為ture,那么ng serve --hmr也有同樣效果。不過(guò)我對(duì)熱替換功能還不是那么相信，重新刷新瀏覽器能保證狀態(tài)更加干凈一些，所以讓environment.ts中的hmr為false.

2、在.angular-cli.json文件的環(huán)境中增加hmr的環(huán)境，大致如下：

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

3、在package.json的scripts中增加一個(gè)新的命令。（當(dāng)然也可以不增加，直接運(yùn)行ng serve --hmr -e=hmr和運(yùn)行npm run hmr效果一樣)

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

4、安裝hmr模塊，命令如下：

npm install --save-dev @angularclass/hmr

5、創(chuàng)建src\hmr.ts文件，內(nèi)容如下：

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(currentModule => ngModule = currentModule);
 module.hot.dispose(() => {
  const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
  const elements = appRef.components.map(c => c.location.nativeElement);
  const removeOldHosts = createNewHosts(elements);
  ngModule.destroy();
  removeOldHosts();
 });
};

這事熱替換的關(guān)鍵，hmrBootstrap會(huì)替換原始的bootstrap(下面會(huì)看到), 替換后，當(dāng)有新的模塊更新時(shí)，hmr會(huì)首先移除掉舊有的模塊，然后接收新的模塊。這些都是發(fā)生在瀏覽器里面。所以頁(yè)面不會(huì)刷新。

6、更新src\main.ts文件如下：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
 if (module[ 'hot' ]) {
  hmrBootstrap(module, bootstrap);
 } else {
  console.error('Ammm.. HMR is not enabled for webpack');
 }
} else {
 bootstrap();
}

這里替換就得啟動(dòng)文件，如果設(shè)置為hmr，那么調(diào)用hmrBootStrap來(lái)啟動(dòng)網(wǎng)頁(yè)，否則就用過(guò)去的

7、現(xiàn)在運(yùn)行npm run hmr或者ng serve --hmr -e=hmr，就實(shí)現(xiàn)了熱替換功能。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: