首頁  >  文章  >  web前端  >  熱模組替換有哪幾種實作方法

熱模組替換有哪幾種實作方法

php中世界最好的语言
php中世界最好的语言原創
2018-05-02 11:05:001682瀏覽

這次帶給大家熱模組替換有哪幾種實現方法,熱模組替換的注意事項有哪些,下面就是實戰案例,一起來看一下。

稍微研究了一下,發現在angular/cli創建的專案中,實現這個不算太難,步驟如下:

1、先創建一個src/environments/environment.hmr. ts文件,內容如下

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

當然,對應的environment.prod.ts和environment.ts需要增加一個hmr:false.

如果environment.ts裡面的hmr設定為ture,那麼ng serve --hmr也有同樣效果。不過我對熱替換功能還不是那麼相信,重新刷新瀏覽器能保證狀態更加乾淨一些,所以讓environment.ts中的hmr為false.

2、在.angular -cli.json檔案的環境中增加hmr的環境,大致如下:

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

3、在package.json的scripts中增加一個新的指令。 (當然也可以不增加,直接運行ng serve --hmr -e=hmr和運行npm run hmr效果一樣)

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

4、安裝hmr模組,指令如下:

npm install --save-dev @angularclass/hmr

5、創建src\hmr.ts文件,內容如下:

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();
 });
};

這事熱替換的關鍵,hmrBootstrap會替換原始的bootstrap(下面會看到), 替換後,當有當新的模組更新時,hmr會先移除舊有的模組,然後接收新的模組。這些都是都發生在瀏覽器裡面。所以頁面不會刷新。

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();
}

這裡替換就得啟動文件,如果設定為hmr,那麼呼叫hmrBootStrap來啟動網頁,否則就用過去的

7、現在運行npm run hmr或ng serve --hmr -e=hmr,實現了熱替換功能。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Angular5對元件標籤新增樣式class步驟說明

nodejs中如何使用websocket(附程式碼)

怎麼會得到Number型別陣列中最大元素

以上是熱模組替換有哪幾種實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn