ng-hot-loader

媒介

webpack-dev-server自带支撑模块热替代特征(HMR)，不革新页面完成代码部分更新，运用HMR能够大幅提拔开辟效力。

完成目标

• [x] 款式热替代 — style-loader自身即支撑HMR，发起依靠库css直接剖析出文件link，降低热替代本钱

• [x] 模板热替代

• [x] 效劳热替代

• [x] 过滤器热替代 — expression 更改才会从新实例化过滤器

• [x] 指令热替代 — 现在low level的支撑

• [x] 掌握器热替代

完成战略

合理分别angular模块，将angular模块分别为主模块，营业模块。路由, 营业效劳，全局效劳合理疏散到主模块与营业模块中。参照angular组件单一职责，单个模块(文件)仅负担有限职责，。

HMR症结中心为组件声明 => 组件定位 => 组件更新。

• 文件定名发起根据官方styleguide

• 关联filter, service, directive在单一模块中声明。

• 症结中心依旧在模块，路由声明。路由声明中，模板与掌握器一致采纳ES6引入计划，template: templateVariable，掌握器声明一致采纳pure function的体式格局，而不是字符串的体式格局。

• 路由声明与组件声明在*.module.js一致文件内部声明。

• 掌握器暂时不斟酌经由过程$controllerProvider注册的范例。

• 路由不斟酌热更新。

• 一切模板文件，都经由过程ES6 default import导入，JS文件发起悉数经由过程destruct的体式格局援用。

/**
 * @description - application level router config.
 * @author bornkiller <hjj491229492@hotmail.com>
 */

'use strict';

// layout module dependency
import layoutAuthorizeTemplate from './authority/authorize.html';
import { AuthorizeController } from './authority/authorize.controller';

import layoutNavbarTemplate from './flow/navbar.html';
import layoutSidebarTemplate from './flow/sidebar.html';
import layoutCoreTemplate from './flow/core.html';
import { SidebarController } from './flow/sidebar.controller';


// layout module name
const LAYOUT_MODULE = 'app.layout';

// layout module router
const LayoutRoute = [
  {
    name: 'authorize',
    url: '/authorize',
    views: {
      'core': {
        template: layoutAuthorizeTemplate,
        controller: AuthorizeController,
        controllerAs: 'vm'
      }
    }
  },
  {
    name: 'application',
    url: '/application',
    views: {
      'navbar': {
        template: layoutNavbarTemplate
      },
      'sidebar': {
        template: layoutSidebarTemplate,
        controller: SidebarController,
        controllerAs: 'vm'
      },
      'core': {
        template: layoutCoreTemplate
      }
    }
  }
];

angular.module(LAYOUT_MODULE, [])
  // eslint-disable-next-line angular/di
  .config(['$stateProvider', function ($stateProvider) {
    LayoutRoute.forEach((route) => {
      $stateProvider.state(route);
    });
  }]);

export { LAYOUT_MODULE };

模块分别

经由过程分别模块完成终究目标：

• ng-hot-analyzer – 剖析组件的声明与定位，重要包含import，register token的剖析。终究汇总，完成模块定位 <–> 模块导出实例 <–> NG组件注册的图谱。

• ng-hot-loader – 会聚子模块操纵，基于剖析结果与对应模板，天生对应HMR代码。

• ng-hmr – 热更新详细完成。

组件替代商定

效劳在angularjs内部属于单例，实例声明经由过程factory的体式格局，声明literal object效劳。

过滤器仅支撑ng-bind运用。

模板热替代现在采纳较为集约的容器定位战略，基于近来的ui-router view举行部分替代。

指令热替代一样采纳较为集约的容器定位战略，经由过程路由模板替代完成。

掌握器一致运用ES6 Class声明，字段更新战略以下：

• [x] 删除字段

• [x] 依靠注入效劳，直接override

• [x] 函数字段，直接override

• [x] 经由过程掌握器内声明shouldFieldUpdate要领来准确掌握对应字段是不是更新。

• [x] 假如掌握器未声明shouldFieldUpdate要领，默许剖断战略是范例变化，范例涌现变化即直接override

HMR示例

if (module.hot) {
  module.hot.accept(['${descriptor.location}'], function () {
    ${translateImportType(descriptor)}
    $hmr.hmrOnChange('${capitalize(descriptor.category)}', '${descriptor.token}', ${descriptor.name});
    $hmr.hmrDoActive('${capitalize(descriptor.category)}', '${descriptor.token}', ${descriptor.name});
  });
};

项目完成

• https://github.com/bornkiller…

• https://github.com/bornkiller…

• https://github.com/bornkiller…

• https://github.com/bornkiller… 热替代DEMO

TODO

• 支撑字符串声明掌握器

• 调解模板scope定位体式格局