细说webpack源码之compile流程-入口函数run(2)

日期：2020-05-11 栏目：程序人生浏览：次

// before-run
// compiler => this
// callback => next
(compiler, callback) => {
  if (compiler.inputFileSystem === inputFileSystem)
    inputFileSystem.purge();
  callback();
}

　　由于before-run中只有一个事件，所以在调用内部callback的next方法后，会由于i大于事件长度而直接调用外部callback。

　　这里的purge方法之前见过，这里复习下内容：

// NodeEnvironmentPlugin
compiler.inputFileSystem = new CachedInputFileSystem(new NodeJsInputFileSystem(), 60000);
// CachedInputFileSystem
CachedInputFileSystem.prototype.purge = function(what) {
  this._statStorage.purge(what);
  this._readdirStorage.purge(what);
  this._readFileStorage.purge(what);
  this._readlinkStorage.purge(what);
  this._readJsonStorage.purge(what);
};
// CachedInputFileSystem => Storage
Storage.prototype.purge = function(what) {
  if (!what) {
    this.count = 0;
    clearInterval(this.interval);
    this.nextTick = null;
    this.data.clear();
    this.levels.forEach(function(level) {
      level.clear();
    });
  } else if (typeof what === "string") { /**/ } else { /**/ }
};

　　一句话概括就是：清除所有打包中缓存的数据。

　　由于假设是第一次，所以这里并没有什么实际操作，接着调用外部callback，用同样的方式触发了run事件流。

　　run事件流也只有一个方法，来源于CachePlugin插件：

Compiler.plugin("run", (compiler, callback) => {
  // 这个属性我暂时也不知道是啥 反正直接callback了
  if (!compiler._lastCompilationFileDependencies) return callback();
  const fs = compiler.inputFileSystem;
  const fileTs = compiler.fileTimestamps = {};
  asyncLib.forEach(compiler._lastCompilationFileDependencies, (file, callback) => {
    // ...
  }, err => {
    // ...
  });
});

　　在第一次触发run事件流时，那个属性是undefined，所以会直接跳过，因为我是边看源码边解析，所以也不知道是啥，哈哈。

　　接下来下一个callback是这个：

this.readRecords(err => {
  if (err) return callback(err);
  this.compile(onCompiled);
});

　　这是另一个原型方法，源码如下：

Compiler.prototype.readRecords = (callback) => {
  // 这个属性也没有
  if (!this.recordsInputPath) {
    this.records = {};
    return callback();
  }
  this.inputFileSystem.stat(this.recordsInputPath, err => {
    // ...
  });
}

　　这里第一次也会跳过并直接callback，看源码大概是传入一个路径并读取里面的文件信息缓存到records中。

　　这下连跳两步，直接进入原型方法compile中，预览一下这个函数：

Compiler.prototype.compile = (callback) => {
  const params = this.newCompilationParams();
  // 依次触发事件流
  this.applyPluginsAsync("before-compile", params, err => {
    if (err) return callback(err);
    this.applyPlugins("compile", params);
    const compilation = this.newCompilation(params);
    this.applyPluginsParallel("make", compilation, err => {
      if (err) return callback(err);
      compilation.finish();
      compilation.seal(err => {
        if (err) return callback(err);
        this.applyPluginsAsync("after-compile", compilation, err => {
          if (err) return callback(err);
          return callback(null, compilation);
        });
      });
    });
  });
}

转载注明出处：http://www.heiqu.com/115.html

细说webpack源码之compile流程-入口函数run(2)

相关推荐