[FE] webpack群侠传（九）：watch
本系列文章记录了我在webpack源码学习过程中遇到的事情，
正如前几篇文章介绍的那样，
一路上我遇到了很多“江湖人物”。
例如，Compiler，Compilation，loader-runner，babel-loader，
tapable，uglifyjs-webpack-plugin，worker-farm，cacahe，extract-text-webpack-plugin，等等。
所以我们可以说，webpack江湖是由这些“人物”组成的，而不是由文本组成的，
这正是面向对象编程，和模块化编程的精髓所在。
就好比金庸先生的武侠小说，
引人入胜的故事情节，离不开鲜活的人物形象。
在代码的世界中，
我们看到的各种“人物”，也是真实存在的，
它们反映了作者对信息组织方式的理解和认知。
故事由哪些人物组成，主线剧情是什么，
哪些情节要详细介绍，哪些应该略过不表，
这些都是把故事讲清楚而不得不考虑的事情。
本文我们继续学习webpack源码，
了解webpack是怎样watch文件变更的。
1. 修改npm scripts
1.1 加入watch命令
我们修改debug-webpack项目的package.json，增加一个新的npm scripts，
{
...
"scripts": {
...
"watch": "webpack --watch"
},
...
}
这样我们就可以使用npm run watch来调用 node_modules/.bin/webpack --watch了。
1.2 执行watch
我们在项目根目录中，执行 npm run watch，
$ npm run watch
> debug-webpack@1.0.0 watch ~/Test/debug-webpack
> webpack --watch
webpack is watching the files…
Hash: 2e91628041d9a877f709
Version: webpack 4.20.2
Time: 347ms
Built at: 2018-10-25 10:50:27
Asset Size Chunks Chunk Names
index.js 937 bytes 0 [emitted] index
Entrypoint index = index.js
[0] ./src/index.js 8 bytes {0} [built]
命令执行完之后，并没有退出，
它会监控源码文件，然后只对改变的文件进行重编译。
1.3 修改源代码
我们修改一下src/index.js文件，把内容改成，
alert(1);
然后保存。
我们发现命令行中，在以上输出内容的尾部，又增加了如下信息，
Hash: 3d9c84dc401a1a18ea6b
Version: webpack 4.20.2
Time: 238ms
Built at: 2018-10-25 10:53:51
Asset Size Chunks Chunk Names
index.js 938 bytes 0 [emitted] index
Entrypoint index = index.js
[0] ./src/index.js 9 bytes {0} [built]
其中Hash值发生了变化。
2. webpack watch流程
2.1 回顾compiler.run
在第三篇文章中，我们知道，
npm run build，调用了node_modules/.bin/webpack，它是一个软链接，
原身在 node_modules/_webpack@4.20.2@webpack/bin/webpack.js。
然后 webpack/bin/webpack.js require了 webpack-cli/bin/cli.js，
webpack-cli中引用了webpack模块，然后调用了compiler.run。
2.2 webpack-cli调用compiler.watch
与npm run build不同是，npm run watch会带参数 --watch 调用 node_modules/.bin/webpack，
$ node_modules/.bin/webpack --watch
这样会影响 webpack-cli的代码逻辑，
重新分析 webpack-cli/bin/cli.js ，我们发现在 第518行，判断了是否处于watch模式，
if (firstOptions.watch || options.watch) {
...
compiler.watch(watchOptions, compilerCallback);
...
} else compiler.run(compilerCallback);
如果处于watch模式，就调用compiler.watch。
通过写log我们得到watchOptions的值为true。
2.3 如何debug
（1）新建debug.js
const webpack = require('webpack');
const options = require('./webpack.config');
const compiler = webpack(options);
compiler.watch(true, (...args) => { });
（2）作为node脚本执行
$ node debug.js
结果命令行什么也没输出，也没有返回，卡在了那里。
（3）修改源代码
现在我们修改一下 src/index.js，然后保存，
alert(2);
（4）检查编译结果
打开 dist/index.js ，文件内容如下，
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert(2)}]);
我们看到它已经更新了。
（5）调试
这说明debug.js是有效的，我们复现了watch过程，
接下来我们就可以在compiler.watch位置打断点，
跟踪watch代码逻辑了。
进行单步调试，流程跳转到了 Compiler.js 第189行 的watch 方法中。
2.4 watch循环
（1）Watching类
查看Compiler.js 第189行，watch是Compiler类的一个实例方法，
watch(watchOptions, handler) {
...
return new Watching(this, watchOptions, handler);
}
其中Watching 是在 webpack/bin/Watching.js 中实现的。
（2）compiler.readRecords
Watching构造函数调用了this.compiler.readRecords，
class Watching {
constructor(compiler, watchOptions, handler) {
...
this.compiler.readRecords(err => {
...
this._go();
});
}
}
readRecords位于Compiler.js 第393行，
readRecords(callback) {
if (!this.recordsInputPath) {
...
return callback();
}
...
}
它判断了，compiler.recordsInputPath这个属性，
在我们的例子中，它为undefined，于是直接调用callback返回了。
this.compiler.readRecords返回后，会调用this._go(); 。
（3）watching._go
this._go是Watching类的实例方法，位于Watching.js 第36行，
_go() {
...
this.compiler.hooks.watchRun.callAsync(this.compiler, err => {
...
this.compiler.compile(onCompiled);
});
}
它会先调用compiler.hooks.watchRun，然后再调用compiler.compile方法。
compiler.compile方法我们已经很熟悉了，它会先make然后在seal。
（4）onCompiled
onCompiled是compiler.compile做完之后的回调，它会处理把文件内容实际写到文件中的逻辑。
const onCompiled = (err, compilation) => {
...
this.compiler.emitAssets(compilation, err => {
...
this.compiler.emitRecords(err => {
...
return this._done(null, compilation);
});
});
};
最终调用了this._done，它是Watching类的实例方法，位于Watching.js 第88行。
_done(err, compilation) {
...
this.compiler.hooks.done.callAsync(stats, () => {
...
if (!this.closed) {
this.watch(
...
);
}
...
});
}
this._done里面会触发compiler.hooks.done，表示编译完成了，
然后调用this.watch开始监控文件的变更。
（5）循环
this.watch是Watching类的一个方法，位于Watching.js 第113行，
watch(files, dirs, missing) {
...
this.watcher = this.compiler.watchFileSystem.watch(
...
(
...
) => {
...
this._invalidate();
},
(fileName, changeTime) => {
this.compiler.hooks.invalid.call(fileName, changeTime);
}
);
}
在文件发生变化时，会调用它的最后一个回调，从而触发compiler.hooks.invalid这个hooks。
我们可以拿到发生变更的文件名fileName，和变更时间changeTime。
我们在这里打个断点，然后修改一下src/index.js再保存，会发现程序会跳转到这里，
fileName的值为，
~/Test/debug-webpack/src/index.js
changeTime的值是一个时间戳，
1540440595000
这个hooks执行完之后，程序会跳转到this.compiler.watchFileSystem.watch的第一个回调中，
调用this._invalidate(); ，然后在_invalidate中又调用了this._go(); 对源码进行重编译再写入到文件中，
最后回到this._done，调用this.watch重新监控。
_invalidate方法，位于 Watching.js 第155行，
_invalidate() {
...
if (...) {
...
} else {
this._go();
}
}
3. watch原理
3.1 NodeEnvironmentPlugin
那么webpack到底是怎样监控文件变更的呢？
在Watching.js 第115行，Watching类的watch方法中调用了，this.compiler.watchFileSystem.watch，
watch(files, dirs, missing) {
...
this.watcher = this.compiler.watchFileSystem.watch(
...
(
...
) => {
...
this._invalidate();
},
(fileName, changeTime) => {
this.compiler.hooks.invalid.call(fileName, changeTime);
}
);
}
然而我们在Compiler.js中却找不到watchFileSystem的定义。
通过全文搜索，我们发现watchFileSystem属性，是由lib/node/NodeEnvironmentPlugin.js 添加上去的。
class NodeEnvironmentPlugin {
apply(compiler) {
...
compiler.watchFileSystem = new NodeWatchFileSystem(
compiler.inputFileSystem
);
...
}
}
而NodeWatchFileSystem 则是由 lib/node/NodeWatchFileSystem.js实现的，它的watch方法如下，
watch(files, dirs, missing, startTime, options, callback, callbackUndelayed) {
...
this.watcher = new Watchpack(options);
if (callbackUndelayed) {
this.watcher.once("change", callbackUndelayed);
}
this.watcher.once("aggregated", (changes, removals) => {
...
callback(
...
);
});
this.watcher.watch(files.concat(missing), dirs.concat(missing), startTime);
...
}
它实例化了一个WatchPack对象，然后为watcher注册了两个事件监听器，
当change事件发生时，会触发最后一个回调callbackUndelayed，
aggregated事件发生时会触发第一个回调callback。
3.2 WatchPack
其中WatchPack来自一个独立的代码库，它是由模块watchpack（v1.6.0）导出的，
它可以用来监控文件和目录的变更。
（1）watchPack.watch
我们来看一下WatchPack的watch方法，
Watchpack.prototype.watch = function watch(files, directories, startTime) {
...
this.fileWatchers = files.map(function(file) {
return this._fileWatcher(file, watcherManager.watchFile(file, this.watcherOptions, startTime));
}, this);
this.dirWatchers = directories.map(function(dir) {
return this._dirWatcher(dir, watcherManager.watchDirectory(dir, this.watcherOptions, startTime));
}, this);
...
};
它调用了_fileWatcher或_dirWatcher方法，第一个参数是file或dir，
第二个参数是一个watcher对象，根据_fileWatcher或_dirWatcher方法的形参我们可以确定这一点，
Watchpack.prototype._fileWatcher = function _fileWatcher(file, watcher) {
watcher.on("change", function(mtime, type) {
...
}.bind(this));
watcher.on("remove", function(type) {
...
}.bind(this));
return watcher;
};
Watchpack.prototype._dirWatcher = function _dirWatcher(item, watcher) {
watcher.on("change", function(file, mtime, type) {
...
}.bind(this));
return watcher;
};
它们只是调用了第二个参数watcher，为之注册了change和remove事件而已。
因此，我们要重点考虑下watcher是怎么来的，
查看watch方法，我们知道，watcher是由watcherManager.watchFile或watchDirectory创建的，
watcherManager.watchFile(file, this.watcherOptions, startTime)
watcherManager.watchDirectory(dir, this.watcherOptions, startTime)
（2）watcherManager.watchDirectory
watcherManager.watchFile和watcherManager.watchDirectory，
定义在watchpack/lib/watchManager.js中，
WatcherManager.prototype.watchFile = function watchFile(p, options, startTime) {
...
return this.getDirectoryWatcher(directory, options).watch(p, startTime);
};
WatcherManager.prototype.watchDirectory = function watchDirectory(directory, options, startTime) {
return this.getDirectoryWatcher(directory, options).watch(directory, startTime);
};
它们都调用了getDirectoryWatcher。
而 getDirectoryWatcher中则创建了一个DirectoryWatcher对象执行watch操作。
位于 watchpack/lib/watchManager.js 第18行，
WatcherManager.prototype.getDirectoryWatcher = function(directory, options) {
...
if(...) {
this.directoryWatchers[key] = new DirectoryWatcher(directory, options);
...
}
...
};
（3）DirectoryWatcher
DirectoryWatcher也是watchpack创建的对象，定义在 watchpack/lib/DirectoryWatcher.js中，
function DirectoryWatcher(directoryPath, options) {
...
this.watcher = chokidar.watch(directoryPath, {
...
});
...
}
它调用了chokidar（v2.0.4）模块得到了一个watcher。
chokidar，封装了Node.js内置的fs.watch方法，位于chokidar/lib/nodefs-handler.js 第37行，
return fs.watch(path, options, handleEvent);
fs.watch的文档可以参考这里，Class: fs.FSWatcher。
总之，watchpack调用了chokidar，chokidar调用了fs.watch完成了watch操作。
参考
webpack-cli v3.1.2 lib/cli.js
webpack v4.20.2 bin/Watching.js
watchpack v1.6.0
chokidar v2.0.4
