webpack工具链热替换 -- angularjs的粗放式实现
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
定位方式
webpack工具链热替换 -- angularjs的粗放式实现相关推荐
- 【webpack】-- 模块热替换
全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...
- vue+webpack热替换
项目地址:http://pan.baidu.com/s/1i5KCXBf 今天上午和同事完成了在mac上面调试了我的框架,最后发现问题出在window系统和mac系统在表示路径的时候出现问题,在解决这 ...
- webpack 3 零基础入门教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
模块热替换 是什么意思? 以前我们使用的 webpack --watch 或 webpack-dev-server 的功能是监听文件改变,就自动刷新浏览器,而这个 模块热替换 不用刷新浏览器,它是只让 ...
- webpack学习之2.自动编译、实时重载LiveReload、热替换HMR
代码沿用webpack学习之1.基础配置 每次要编译代码时,手动运行 npm run build 就会变得很麻烦. webpack 中有几个不同的方式,可以在代码发生变化后自动编译代码: webpac ...
- webpack学习(七):启用 HMR(模块热替换)
demo地址: https://github.com/Lkkkkkkg/webpack-demo 上次使用 webpack-dev-serve : https://blog.csdn.net/qq59 ...
- webpack实践之路(七):模块热替换HMR
HMR 模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块,而无需进行完全刷新. HMR主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面 ...
- webpack 热替换和热重载
热替换是利用h5 的新事件 eventSource 实现的,服务器向前端单向推送消息的事件,服务推送给前端,修改的文件 前端请求到该修改的文件插入到页面中,然后执行该js,页面局部渲染出来,原先的执行 ...
- 2022,前端工具链十年盘点
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- Webpack--模块热替换(HMR)
一.概述 (1)live reload 只要检测到代码改动就会自动重新构建,然后触发网页刷新 (2)webapack中的模块热替换 可以让代码在页面不刷新的前提下得到最新的改动,甚至不需要重新发起请求 ...
最新文章
- oc75--不可变字典NSDictionary
- 关于MVC与三层架构、个人总结网上杂七杂八得出的最终成果、asp.net (core) MVC、JavaWeb的MVC
- Linux新内核修复14年古老bug
- ZH奶酪:Python按行读取文件
- jsp 使用base标签 没有作用_JSP学习篇
- python常用内置函数可以操作字符串_Python常用内置函数(二)
- php 不是有效的win32,%1不是有效的 win32应用程序(64位转换32位)
- linux+expect插件_Linux批量部署工具Expect
- bzoj3195 [Jxoi2012]奇怪的道路
- 又一次寻找bug的经历...这次是 openlayers + chrome + win7
- arduino 按钮读取_Arduino内置教程-数字-检测按键状态
- C# 很基础的那些东西
- 计算机组老师颁奖词,学校优秀老师颁奖词
- 群发邮件软件和邮件群发工具哪个好?如何群发邮件不进入垃圾箱
- Fragment被replace时重复加载数据的问题
- 我们都是被宫崎骏爱过的孩子
- python bind绑定失败_Python tkinter之Bind(绑定事件)的使用示例
- 四川大学2014年数学分析考研试题
- Allegro学习进行时
- Inventor 2021 安装避坑指南