Webpack で実行されるエントリー関数の詳細な解釈-jsチュートリアル-php.cn

Webpack は、フロントエンドのリソース読み込み/パッケージ化ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。この記事では主に Webpack ソースコードのコンパイルプロセス、つまりエントリ関数の実行について紹介します。Webpack は現在、React と Redux をベースに開発されたアプリケーションの主要なパッケージングツールです。 Angular 2 や他のフレームワークを使用して開発されたアプリケーションの多くも Webpack を使用していると思います。

このセクションのプロセスは次の図に示すとおりです:

これで、正式にパッケージ化プロセスに入りました。開始メソッドが実行されます:

Compiler.prototype.run = (callback) => {
  const startTime = Date.now();
  const onCompiled = (err, compilation) => { /**/ };
  this.applyPluginsAsync("before-run", this, err => {
    if (err) return callback(err);
    this.applyPluginsAsync("run", this, err => {
      if (err) return callback(err);
      this.readRecords(err => {
        if (err) return callback(err);
        this.compile(onCompiled);
      });
    });
  });
}

ログイン後にコピー

コンパイラオブジェクトを導入してみませんか?コンストラクターには初期化メソッドがなく、ただの普通の変数宣言なので、特に話すことはありません。

runメソッドでは、まずtapableのapplyPluginsAsyncを呼び出して実行前イベントフローを実行します。イベントフローは以下のように定義されています:

// NodeEnvironmentPlugin
compiler.plugin("before-run", (compiler, callback) => {
  if (compiler.inputFileSystem === inputFileSystem)
    inputFileSystem.purge();
  callback();
});

ログイン後にコピー

コンパイラオブジェクトのファイルシステムメソッドのマウントプラグインでは、beforeは次のように定義されています。 injected -このイベントストリームを実行します。ここでは、最初に applyPluginsAsync を見ていきます (Webpack ソースコードに適応するために若干の変更を加えています):

// tapable
Tapable.prototype.applyPluginsAsync = (name, ...args, callback) => {
  var plugins = this._plugins[name];
  if (!plugins || plugins.length === 0) return callback();
  var i = 0;
  var _this = this;
  // args为[args,next函数]
  args.push(copyProperties(callback, function next(err) {
    // 事件流出错或者全部执行完后调用回调函数
    if (err) return callback(err);
    i++;
    if (i >= plugins.length) {
      return callback();
    }
    // 执行下一个事件
    plugins[i].apply(_this, args);
  }));
  // 执行第一个事件
  plugins[0].apply(this, args);
};

ログイン後にコピー

その時点では、このシリーズのイベントストリームトリガーメソッドについてはセクションで説明しませんでした。

1 、 copyProperties は、 Object.assign と同様に、オブジェクトのプロパティをコピーするために使用されます。ただし、ここでは 2 つの関数が渡されますが、これはまったく役に立ちません。！！！！ (オブジェクトコピーメソッドがここで何に役立つかについていつも行き詰まっていたので、その時は説明を書きませんでした)

2. webpack では、args はコンパイラのコンテキストを指します

3.イベントストリームに挿入されるイベントは、(上記の例のように) コールバックメソッドが実行されるとき、この時点で実行されるのは外部コールバックではなく、次の関数です

4.コールバックが実行されるか、途中でエラーが発生するか、すべてのイベントフローが実行されます

これは非常に明確ですさて、before-runに注入される関数パラメータの意味は次のとおりです:

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

ログイン後にコピー

イベントが1つしかないため実行前では、内部コールバックの次のメソッドを呼び出した後、i がイベントの長さより大きいため、外部コールバックが直接呼び出されます。

ここでのパージ方法は以前に見たことがありますので、ここで内容を確認してみましょう:

// 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 { /**/ }
};

ログイン後にコピー

一言で言えば、それは次のとおりです: パッケージ内のキャッシュされたデータをすべてクリアします。

初回であることを想定しているため、ここでは実際の操作はありません。その後、外部コールバックが呼び出され、同じように実行イベントストリームがトリガーされます。

CachePlugin プラグインからの実行イベントストリームのメソッドは 1 つだけです:

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 => {
    // ...
  });
});

ログイン後にコピー

実行イベントストリームが初めてトリガーされるとき、属性は未定義であるため、直接スキップされます。ソースコードを読みながら解析しているので、それが何なのかも分かりません（笑）。

次のコールバックはこれです:

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 => {
    // ...
  });
}

ログイン後にコピー

ここの初回もスキップしてコールバックを直接渡します。ソースコードを見ると、おそらくこれを渡します。ファイル情報はレコードにキャッシュされます。

次に、2 つのステップを続けてジャンプし、プロトタイプメソッドのコンパイルを直接入力し、この関数をプレビューします:

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);
        });
      });
    });
  });
}

ログイン後にコピー

コンパイルとパッケージ化のコアプロセスが明確に確認でき、コンパイル前、コンパイル、メイク、および後 -コンパイルイベントはメソッドストリーム内でトリガーされ、最後にコールバック関数が呼び出されます。

上記は私があなたのためにまとめたものです。

Vue.js 2.0を使用して背景ビデオログインページを実装する方法

Vueを使用して時間変換命令を開発する方法?

angularjs でページアダプテーションを実装するにはどうすればよいですか?

VueJs で window.resize を監視する方法とそれを具体的に実装する方法?

AngularJSの$windowウィンドウオブジェクトの概念の詳細な解釈

ReactネイティブブリッジAndroidを実装する方法、具体的な手順は何ですか?

以上がWebpack で実行されるエントリー関数の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。