成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

問道Angular——Angular5/6/7項(xiàng)目添加熱更新(HMR)功能

Aceyclee / 3543人閱讀

摘要：提供以上熱更新功能使用初始化項(xiàng)目命令行進(jìn)入該目錄啟動(dòng)項(xiàng)目將附帶功能。

??提供angular6以上HMR(熱更新)功能

使用hmr-cli 
npm i -g hmr-cli

??初始化angular項(xiàng)目,命令行進(jìn)入該目錄

hmr init

??npm run hmr啟動(dòng)項(xiàng)目將附帶hmr功能。

詳細(xì)配置如下： Angular6添加HMR environments目錄

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
  hmr: false
};

復(fù)制environment新增environment.hmr.ts修改hmr:true

export const environment = {
  hmr: true
};
.angular.json文件

build的configurations中添加

"hmr": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.hmr.ts"
    }
  ]
}

serve的configurations中添加

"hmr": {
  "hmr": true,
  "browserTarget": "my-app:build:hmr"
}
tsconfig.app.json的compilerOptions的types中添加 
"types": ["node"]
package.json的scripts中添加 
"hmr": "ng serve --configuration hmr --open"
安裝依賴 
npm install --save-dev @angularclass/hmr
src目錄下創(chuàng)建hmr.ts 
import { NgModuleRef, ApplicationRef } from "@angular/core";
import { createNewHosts } from "@angularclass/hmr";

export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
  let ngModule: NgModuleRef;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};
修改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("HMR is not enabled for webpack-dev-server!");
    console.log("Are you using the --hmr flag for ng serve?");
  }
} else {
  bootstrap().catch(err => console.log(err));
}
Angular5添加HMR environments目錄

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
  hmr: false
};

復(fù)制environment新增environment.hmr.ts修改hmr:true

export const environment = {
  hmr: true
};
.angular-cli.json的environments中添加 
"hmr": "environments/environment.hmr.ts"
在package.json的scripts中增加 
"hmr": "ng serve --hmr -e=hmr --open"
安裝依賴 
npm install --save-dev @angularclass/hmr
src目錄下創(chuàng)建hmr.ts 
import { NgModuleRef, ApplicationRef } from "@angular/core";
import { createNewHosts } from "@angularclass/hmr";

export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
  let ngModule: NgModuleRef;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};
修改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("HMR is not enabled for webpack-dev-server!");
    console.log("Are you using the --hmr flag for ng serve?");
  }
} else {
  bootstrap().catch(err => console.log(err));
}

???問道Angular系列???

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98247.html

相關(guān)文章

  • webpack工具鏈熱替換 -- angularjs的粗放式實(shí)現(xiàn)

    摘要：參照組件單一職責(zé)，單個(gè)模塊文件僅承擔(dān)有限職責(zé)，。路由聲明與組件聲明在統(tǒng)一文件內(nèi)部聲明。組件替換約定服務(wù)在內(nèi)部屬于單例，實(shí)例聲明通過的方式，聲明服務(wù)。指令熱替換同樣采用較為粗放的容器定位策略，通過路由模板替換實(shí)現(xiàn)。 ng-hot-loader 前言 webpack-dev-server自帶支持模塊熱替換特性(HMR)，不刷新頁面實(shí)現(xiàn)代碼局部更新，使用HMR可以大幅提升開發(fā)效率。 實(shí)現(xiàn)目標(biāo)...

    Eminjannn 評(píng)論0 收藏0

  • ReactNative-HMR原理探索

    摘要：原理探索前言在開始本文前，先簡單說下我們?cè)陂_發(fā)項(xiàng)目中，本地的服務(wù)究竟扮演的是什么樣的角色。這無疑是閹割了一大部分功能綜上，如果僅僅用于切圖，可能不會(huì)有那么多的問題 ReactNative-HMR原理探索 前言 在開始本文前，先簡單說下我們?cè)陂_發(fā)RN項(xiàng)目中，本地的node服務(wù)究竟扮演的是什么樣的角色。在我們的RN APP中有配置本地開發(fā)的地方，只要我們輸入我們本地的IP和端口號(hào)8081就...

    GT 評(píng)論0 收藏0

  • Webpack HMR 原理解析

    摘要：在過程中會(huì)利用簡稱中的兩個(gè)方法和。是通過請(qǐng)求最新的模塊代碼，然后將代碼返回給，會(huì)根據(jù)返回的新模塊代碼做進(jìn)一步處理，可能是刷新頁面，也可能是對(duì)模塊進(jìn)行熱更新。該方法返回的就是最新值對(duì)應(yīng)的代碼塊。 Hot Module Replacement（簡稱 HMR) 包含以下內(nèi)容： 熱更新圖 熱更新步驟講解 showImg(https://segmentfault.com/img/remote...

    Ververica 評(píng)論0 收藏0

  • Webpack 2: 生產(chǎn)力工具, 模塊熱替換(HMR)的幾種方式

    摘要：更新已經(jīng)到了這里添加更新說明并說明結(jié)合使用的簡要步驟參考資料環(huán)境在中添加中的設(shè)置的要設(shè)置為要在你的應(yīng)用程序入口之前添加如下在有完整的配置入口文件要這樣導(dǎo) 2018-01-10 更新 Webpacket 已經(jīng)到3了, 這里添加更新說明,并說明結(jié)合babel-loader使用的簡要步驟 參考資料 https://doc.webpack-china.org... https://githu...

    changfeng1050 評(píng)論0 收藏0

  • 如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（四）

    摘要：在前后端分離的前端項(xiàng)目開發(fā)中經(jīng)常用到。是的一個(gè)中間件。即是一個(gè)重要的功能。配置先來在配置文件中引入添加一個(gè)和通信的客戶端添加應(yīng)用入口文件在插件中引入在我們的開發(fā)環(huán)境中是這樣配置的。 原文鏈接此文是我同事寫的，搭建Express結(jié)合Webpack。以下是正文，后面我會(huì)附上我的解讀 Express 結(jié)合 Webpack 實(shí)現(xiàn)HMR 本篇文件主要講結(jié)合 Webpack 和 Express 實(shí)...

    StonePanda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<