未加星标

webpack 中的 watch & cache (上)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

生成 Watching 实例 watching ,将编译流程控制交给 watching 。

webpack/lib/Compiler.js Compiler.prototype.watch = function(watchOptions, handler) { this.fileTimestamps = {}; this.contextTimestamps = {}; var watching = new Watching(this, watchOptions, handler); return watching; };

无论是 webpack --watch ,还是 webpack-dev-middleware 模块,都是调用 compiler.watch 方法进行初始化 watch 流程,在 Compiler.prototype.watch 逻辑中,与 Compiler.prototype.run 在方法中完成具体编译流程 不同的是,会通过生成 watching 实例来 接管具体编译流程 。

构造实例,进行第一次编译初始化

watching 作为 watch 监听流程中的最上层对象,满足了 watch 流程在逻辑最上层的各个阶段衔接。

webpack/lib/Compiler.js function Watching(compiler, watchOptions, handler) { this.startTime = null; this.invalid = false; this.error = null; this.stats = null; this.handler = handler; if(typeof watchOptions === "number") { this.watchOptions = { aggregateTimeout: watchOptions }; } else if(watchOptions && typeof watchOptions === "object") { this.watchOptions = Object.create(watchOptions); } else { this.watchOptions = {}; } this.watchOptions.aggregateTimeout = this.watchOptions.aggregateTimeout || 200; this.compiler = compiler; this.running = true; this.compiler.readRecords(function(err) { if(err) return this._done(err); this._go(); }.bind(this)); }

对于 Watching 构造函数,其实可以分成两个部分

基础属性设置

startTime :执行每次编译时( Watching.prototype._go 方法调用) ,会赋值编译启动时间,在后续文件是否需要再次编译时,作为重要根据之一

invalid :表明现在 watching 的调用状态,例如在 this.runing 为 true 时,表明运行正常,会赋值该属性为 true

error :存放编译过程的错误对象,完成每次编译后会回传给 handler 回调

stats :存放编译过程中的各个数值,同样也是会在每次编译后会回传给 handler 回调

handler :指的是,每次编译完执行的回调函数,一个常见的例子是每次编译完在命令行中出现的资源列表就是通过这个函数实现

watchOptions : watch 调用参数设置,其中 aggregateTimeout 参数代表的是每一次文件(夹)变化后在 aggregateTimeout 值内的变化都会进行合并发送

compiler :生成 watching 对象的 Compiler 实例

running : watching 实例的运行状态

执行初始化编译

从 this._go 调用开始,就会进入 编译 -> watch监听编译 -> 文件变更触发编译 -> 编译 的循环

执行编译

作为执行编译的入口 Watching.prototype._go 函数的结构与 Compiler.prototype.run 的结构类似,都是调用 Compiler 提供的诸如 this.compile 、this. emitAssets 等方法完成编译过程。


webpack 中的 watch & cache (上)

与 run 类似, _go 函数同样会调用 compiler.compile 方法进行编译,同时在完成 emitAssets (资源输出)、 emitRecords (记录输出) 后,也就是完成这一次编译后,会调用 this.done 方法进行 watch 循环的最后一步

调用文件监听

在完成编译后,为了在不重复启动编译进程的情况下,文件改动会自动重新编译。会在 Watching.prototype._done 中实时监听文件操作进行编译。

Watching.prototype._done = function(err, compilation) { // 省略部分流程(结束状态值设置、结束事件触发等) if(!this.error) this.watch(compilation.fileDependencies, compilation.contextDependencies, compilation.missingDependencies); };

这里在 _done 的最后一个步骤,会调用 Watching.prototype.watch 来进行文件监听:

Watching.prototype.watch = function(files, dirs, missing) { this.watcher = this.compiler.watchFileSystem.watch(files, dirs, missing, this.startTime, this.watchOptions, function(err, filesModified, contextModified, missingModified, fileTimestamps, contextTimestamps) { this.watcher = null; if(err) return this.handler(err); this.compiler.fileTimestamps = fileTimestamps; this.compiler.contextTimestamps = contextTimestamps; this.invalidate(); }.bind(this), function() { this.compiler.applyPlugins("invalid"); }.bind(this)); };

Watching.prototype.watch 通过 compiler.watchFileSystem 的 watch 方法实现,可以大致看出在文件(夹)变化触发编译后,会执行传递的回调函数,最终会调用 Watching.prototype.invalidate 进行编译触发:

Watching.prototype.invalidate = function() { if(this.watcher) { this.watcher.pause(); this.watcher = null; } if(this.running) { this.invalid = true; return false; } else { this._go(); } };

到了 Watching.prototype.invalide 这个方法后,又去从 Watching.prototype._go 函数开始进行新一轮的编译,到这里整个 watch 的流程就串起来了。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 其实
分页:12
转载请注明
本文标题:webpack 中的 watch & cache (上)
本站链接:http://www.codesec.net/view/524562.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)