2. 程式人生 > >webpack-tapable-0.2.8 原始碼分析

webpack-tapable-0.2.8 原始碼分析

阿新 • • 發佈：2018-12-11

webpack 是基於事件流的打包構建工具，也就是內建了很多 hooks。作為使用方，可以在這些鉤子當中，去插入自己的處理邏輯，而這一切的實現都得益於 tapable 這個工具。它有多個版本，webpack 前期的版本是依賴於 tapable 0.2.8 這個版本，後來重構了，發了 2.0.0 beta 版本，因為原始碼都是通過字串拼接，通過 new Function 的模式使用，所以看起來比較晦澀。

那麼既然如此，我們先從早期的 0.2.8 這個版本瞭解下它的前身，畢竟核心思想不會發生太大的變化。

tapable 的實現類似於 node 的 EventEmitter 的釋出訂閱模式。用一個物件的鍵儲存對應的事件名稱，鍵值來儲存事件的處理函式，類似於下面：

function Tapable () {
  this._plugins = {
    'emit': [handler1, handler2, ......]
  }
}
複製程式碼

同時，原型上定義了不同的方法來呼叫 handlers。

我們先來看下用法，

  1. plugin 與 applyPlugins

    void plugin(names: string|string[], handler: Function)
void applyPlugins(name: string, args: any...)
複製程式碼

    最基礎的就是註冊外掛以及外掛觸發的回撥函式。

    const Tapable = require
     
    ('tapable')
const t = new Tapable()

// 註冊外掛
t.plugin('emit', (...args) => {
  console.log(args)
  console.log('This is a emit handler')
})

// 呼叫外掛
t.applyPlugins('emit', '引數1')

// 列印如下
[ '引數1' ]
This is a emit handler
複製程式碼

    原始碼如下

    Tapable.prototype.applyPlugins = function applyPlugins(name) {
  if(!this
     
    ._plugins[name]) return;
  var args = Array.prototype.slice.call(arguments, 1);
  var plugins = this._plugins[name];
  for(var i = 0; i < plugins.length; i++)
    plugins[i].apply(this, args);
};

Tapable.prototype.plugin = function plugin(name, fn) {
  if(Array.isArray(name)) {
    name.forEach(function(name) {
      this.plugin(name, fn);
    }, this);
    return;
  }
  if(!this._plugins[name]) this._plugins[name] = [fn];
  else this._plugins[name].push(fn);
};
複製程式碼

    很簡單，內部維護 _plugins 屬性來快取 plugin 名稱以及 handler。

  2. apply

    void apply(plugins: Plugin...)
複製程式碼

    接收 plugin 作為引數，每個 plugin 必須提供 apply 方法，也就是 webpack 在編寫 plugin 的規是外掛例項必須提供 apply 方法。

    const Tapable = require('tapable')
const t = new Tapable()

// 宣告一個 webpack 外掛的類，物件必須宣告 apply 方法
class WebpackPlugin {
  constructor () {}
  apply () {
    console.log('This is webpackPlugin')
  }
}

const plugin = new WebpackPlugin()

// tapable.apply
t.apply(plugin) // print 'This is webpackPlugin'
複製程式碼

    原始碼如下

    Tapable.prototype.apply = function apply() {
  for(var i = 0; i < arguments.length; i++) {
    arguments[i].apply(this);
  }
};
複製程式碼

    也很簡單，依次執行每個外掛的 apply 方法。

  3. applyPluginsWaterfall

    any applyPluginsWaterfall(name: string, init: any, args: any...)
複製程式碼

    依次呼叫外掛對應的 handler，傳入的引數是上一個 handler 的返回值，以及呼叫 applyPluginsWaterfall 傳入 args 引數組成的陣列，說起來很繞，看看下面的例子：

    t.plugin('waterfall', (...args) => {
  // print ['init', 'args1']
  console.log(args)
  return 'result1'
})

t.plugin('waterfall', (...args) => {
  // print ['result1', 'args1']
  console.log(args)
  return 'result2'
})

const ret = t.applyPluginsWaterfall('waterfall', 'init', 'args1') // ret => 'result2'
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsWaterfall = function applyPluginsWaterfall(name, init) {
  if(!this._plugins[name]) return init;
  var args = Array.prototype.slice.call(arguments, 1);
  var plugins = this._plugins[name];
  var current = init;
  for(var i = 0; i < plugins.length; i++) {
    args[0] = current;
    current = plugins[i].apply(this, args);
  }
  return current;
};
複製程式碼

    上一個 handler 返回的值，會作為下一個 handler的第一個引數。

  4. applyPluginsBailResult

    any applyPluginsBailResult(name: string, args: any...)
複製程式碼

    依次呼叫外掛對應的 handler，傳入的引數是 args，如果正執行的 handler 的 返回值不是 undefined，其餘的 handler 都不會執行了。 bail 是保險的意思，即只要任意一個 handler 有 !== undefined 的返回值，那麼函式的執行就終止了。

    t.plugin('bailResult', (...args) => {
  // [ '引數1', '引數2' ]
  console.log(args)
  return 'result1'
})

t.plugin('bailResult', (...args) => {
  // 因為上一個函式返回了 'result1'，所以不會執行到這個handler
  console.log(args)
  return 'result2'
})

t.applyPluginsBailResult('bailResult', '引數1', '引數2')
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsBailResult = function applyPluginsBailResult(name, init) {
  if(!this._plugins[name]) return;
  var args = Array.prototype.slice.call(arguments, 1);
  var plugins = this._plugins[name];
  for(var i = 0; i < plugins.length; i++) {
    var result = plugins[i].apply(this, args);
    if(typeof result !== "undefined") {
      return result;
    }
  }
};
複製程式碼

    只要 handler 返回的值 !== undefined，就會停止呼叫接下來的 handler。

  5. applyPluginsAsyncSeries & applyPluginsAsync（支援非同步）

    void applyPluginsAsync(
  name: string,
  args: any...,
  callback: (err?: Error) -> void
)
複製程式碼

    applyPluginsAsyncSeries 與 applyPluginsAsync 的函式引用都是相同的，並且函式內部支援非同步。callback 在所有 handler 都執行完了才會呼叫，但是在註冊 handler 的時候，函式內部一定要執行 next() 的邏輯，這樣才能執行到下一個 handler。

    t.plugin('asyncSeries', (...args) => {
  // handler 的最後一個引數一定是 next 函式
  const next = args.pop()
  // 執行 next，函式才會執行到下面的 handler
  setTimeout (() => {
    next()
  }, 3000)
})

t.plugin('asyncSeries', (...args) => {
  // handler 的最後一個引數一定是 next
  const callback = args.pop()
  // 執行 next，函式才會執行到 applyPluginsAsyncSeries 傳入的 callback
  Promise.resolve(1).then(next)
})

t.applyPluginsAsyncSeries('asyncSeries', '引數1', (...args) => {
  console.log('這是 applyPluginsAsyncSeries 的 callback')
})
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsAsyncSeries = Tapable.prototype.applyPluginsAsync = function applyPluginsAsyncSeries(name) {
  var args = Array.prototype.slice.call(arguments, 1);
  var callback = args.pop();
  var plugins = this._plugins[name];
  if(!plugins || plugins.length === 0) return callback();
  var i = 0;
  var _this = this;
  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);
};
複製程式碼

    applyPluginsAsyncSeries 內部維護了一個 next 函式，這個函式作為每個 handler 的最後一個引數傳入，handler 內部支援非同步操作，但是必須手動呼叫 next 函式，才能執行到下一個 handler。

  6. applyPluginsAsyncSeriesBailResult（支援非同步）

    void applyPluginsAsyncSeriesBailResult(
  name: string,
  args: any...,
  callback: (result: any) -> void
)
複製程式碼

    函式支援非同步，只要在 handler 裡面呼叫 next 回撥函式，並且傳入任意引數，就會直接執行 callback。

    t.plugin('asyncSeriesBailResult', (...args) => {
  // handler 的最後一個引數一定是 next 函式
  const next = args.pop()
  // 因為傳了字串，導致直接執行 callback
  next('跳過 handler 函式')
})

t.plugin('asyncSeriesBailResult', (...args) => {
  
})

t.applyPluginsAsyncSeriesBailResult('asyncSeriesBailResult', '引數1', (...args) => {
  console.log('這是 applyPluginsAsyncSeriesBailResult 的 callback')
})
// print '這是 applyPluginsAsyncSeriesBailResult 的 callback'
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsAsyncSeriesBailResult = function applyPluginsAsyncSeriesBailResult(name) {
  var args = Array.prototype.slice.call(arguments, 1);
  var callback = args.pop();
  if(!this._plugins[name] || this._plugins[name].length === 0) return callback();
  var plugins = this._plugins[name];
  var i = 0;
  var _this = this;
  args.push(copyProperties(callback, function next() {
    if(arguments.length > 0) return callback.apply(null, arguments);
    i++;
    if(i >= plugins.length) {
      return callback();
    }
    plugins[i].apply(_this, args);
  }));
  plugins[0].apply(this, args);
};
複製程式碼

    applyPluginsAsyncSeriesBailResult 內部維護了一個 next 函式，這個函式作為每個 handler 的最後一個引數傳入，handler 內部支援非同步操作，但是必須手動呼叫 next 函式，才能執行到下一個 handler，next 函式可以傳入引數，這樣會直接執行 callback。

  7. applyPluginsAsyncWaterfall（支援非同步）

    void applyPluginsAsyncWaterfall(
  name: string,
  init: any,
  callback: (err: Error, result: any) -> void
)
複製程式碼

    函式支援非同步，handler 的接收兩個引數，第一個引數是上一個 handler 通過 next 函式傳過來的 value，第二個引數是 next 函式。next 函式接收兩個引數，第一個是 error，如果 error 存在，就直接執行 callback。第二個 value 引數，是傳給下一個 handler 的引數。

    t.plugin('asyncWaterfall', (value, next) => {
// handler 的最後一個引數一定是 next 函式
  console.log(value)
  next(null, '來自第一個 handler')
})

t.plugin('asyncWaterfall', (value, next) => {
  console.log(value)
  next(null, '來自第二個 handler')
})

t.applyPluginsAsyncWaterfall('asyncWaterfall', '引數1', (err, value) => {
  if (!err) {
    console.log(value)
  }
})

// 列印如下

引數1
來自第一個 handler
來自第二個 handler
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsAsyncWaterfall = function applyPluginsAsyncWaterfall(name, init, callback) {
  if(!this._plugins[name] || this._plugins[name].length === 0) return callback(null, init);
  var plugins = this._plugins[name];
  var i = 0;
  var _this = this;
  var next = copyProperties(callback, function(err, value) {
    if(err) return callback(err);
    i++;
    if(i >= plugins.length) {
      return callback(null, value);
    }
    plugins[i].call(_this, value, next);
  });
  plugins[0].call(this, init, next);
};
複製程式碼

    applyPluginsAsyncWaterfall 內部維護了一個 next 函式，這個函式作為每個 handler 的最後一個引數傳入，handler 內部支援非同步操作，但是必須手動呼叫 next 函式，才能執行到下一個 handler，next 函式可以傳入引數，第一個引數為 err， 第二引數為上一個 handler 返回值。

  8. applyPluginsParallel（支援非同步）

    void applyPluginsParallel(
  name: string,
  args: any...,
  callback: (err?: Error) -> void
)
複製程式碼

    並行的執行函式，每個 handler 的最後一個引數都是 next 函式，這個函式用來檢驗當前的 handler 是否已經執行完。

    t.plugin('parallel', (...args) => {
  const next = args.pop()
  console.log(1)
  // 必須呼叫 next 函式，要不然 applyPluginsParallel 的 callback 永遠也不會回撥
  next('丟擲錯誤了1', '來自第一個 handler')
})

t.plugin('parallel', (...args) => {
  const next = args.pop()
  console.log(2)
  // 必須呼叫 next 函式，要不然 applyPluginsParallel 的 callback 永遠也不會回撥
  next('丟擲錯誤了2')
})

t.applyPluginsParallel('parallel', '引數1', (err) => {
  // print '丟擲錯誤了1'
  console.log(err)
})
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsParallel = function applyPluginsParallel(name) {
  var args = Array.prototype.slice.call(arguments, 1);
  var callback = args.pop();
  if(!this._plugins[name] || this._plugins[name].length === 0) return callback();
  var plugins = this._plugins[name];
  var remaining = plugins.length;
  args.push(copyProperties(callback, function(err) {
    if(remaining < 0) return; // ignore
    if(err) {
      remaining = -1;
      return callback(err);
    }
    remaining--;
    if(remaining === 0) {
      return callback();
    }
  }));
  for(var i = 0; i < plugins.length; i++) {
    plugins[i].apply(this, args);
    if(remaining < 0) return;
  }
};
複製程式碼

    applyPluginsParallel 並行地呼叫 handler。內部通過閉包維護了 remaining 變數，用來判斷內部的函式是否真正執行完，handler 的最後一個引數是一個函式 check。如果 handler 內部使用者想要的邏輯執行完，必須呼叫 check 函式來告訴 tapable，進而才會執行 args 陣列的最後一個 check 函式。

  9. ** applyPluginsParallelBailResult **（支援非同步）

    void applyPluginsParallelBailResult(
  name: string,
  args: any...,
  callback: (err: Error, result: any) -> void
)
複製程式碼

    並行的執行函式，每個 handler 的最後一個引數都是 next 函式，next 函式必須呼叫，如果給 next 函式傳參，會直接走到 callback 的邏輯。callback 執行的時機是跟 handler 註冊的順序有關，而不是跟 handler 內部呼叫 next 的時機有關。

    t.plugin('applyPluginsParallelBailResult', (next) => {
  console.log(1)
  setTimeout(() => {
    next('has args 1')
  }, 3000)
})

t.plugin('applyPluginsParallelBailResult', (next) => {
  console.log(2)
  setTimeout(() => {
    next('has args 2')
  })
})

t.plugin('applyPluginsParallelBailResult', (next) => {
  console.log(3)
  next('has args 3')
})

t.applyPluginsParallelBailResult('applyPluginsParallelBailResult', (result) => {
  console.log(result)
})

// 列印如下
1
2
3
has args 1

雖然第一個 handler 的 next 函式是延遲 3s 才執行，但是註冊的順序是在最前面，所以 callback 的 result 引數值是 'has args 1'。
複製程式碼

    原始碼如下

    Tapable.prototype.applyPluginsParallelBailResult = function applyPluginsParallelBailResult(name) {
  var args = Array.prototype.slice.call(arguments, 1);
  var callback = args[args.length - 1];
  if(!this._plugins[name] || this._plugins[name].length === 0) return callback();
  var plugins = this._plugins[name];
  var currentPos = plugins.length;
  var currentResult;
  var done = [];
  for(var i = 0; i < plugins.length; i++) {
    args[args.length - 1] = (function(i) {
      return copyProperties(callback, function() {
        if(i >= currentPos) return; // ignore
        done.push(i);
        if(arguments.length > 0) {
          currentPos = i + 1;
          done = fastFilter.call(done, function(item) {
            return item <= i;
          });
          currentResult = Array.prototype.slice.call(arguments);
        }
        if(done.length === currentPos) {
          callback.apply(null, currentResult);
          currentPos = 0;
        }
      });
    }(i));
    plugins[i].apply(this, args);
  }
};
複製程式碼

    for 迴圈裡面並行的執行 handler，handler 的最後一個引數是一個匿名回撥函式，這個匿名函式必須在每個 handler 裡面手動的執行。而 callback 的執行時機就是根據 handler 的註冊順序有關。

從原始碼上來看，tapable 是提供了很多 API 來對應不同調用 handler 的場景，有同步執行，有非同步執行，還有序列非同步，並行非同步等。這些都是一些高階的技巧，不管是 express，還是 VueRouter 的原始碼，都利用這些同異步執行機制，但是可以看出程式是有邊界的。也就是約定成俗，從最後一個 applyPluginsParallel 函式來看，使用者必須呼叫匿名回撥函式，否則 tapable 怎麼知道你內部是否有非同步操作，並且非同步操作在某個時候執行完了呢。

既然知道了 0.2.8 的核心思想，那麼 2.0.0-beta 版的重構更是讓人驚豔，目前的原始碼分析正在整理，連結如下。

相關推薦

webpack-tapable-0.2.8 原始碼分析

webpack 是基於事件流的打包構建工具，也就是內建了很多 hooks。作為使用方，可以在這些鉤子當中，去插入自己的處理邏輯，而這一切的實現都得益於 tapable 這個工具。它有多個版本，webpack 前期的版本是依賴於 tapable 0.2.8 這個版本，後來重構了，發了 2.0.0 beta 版本

Android 5.0 Camera系統原始碼分析(2)：Camera開啟流程

1. 前言 本文將分析android系統原始碼，從frameworks層到hal層，暫不涉及app層和kernel層。由於某些函式比較複雜，在貼出程式碼時會適當對其進行簡化。本文屬於自己對原始碼的總結，僅僅是貫穿程式碼流程，不會深入分析各個細節。歡迎聯絡討論，QQ：1026

Android 7.0 Gallery相簿原始碼分析8

在Android 7.0 Gallery相簿原始碼分析3 - 資料載入及顯示流程一文最後講了AlbumSetSlidingWindow的onContentChanged方法，專輯縮圖和縮圖下面的label的載入就是在此方法中完成的 public

【JUC】JDK1.8原始碼分析之CountDownLatch

轉自 https://www.cnblogs.com/leesf456/p/5406191.html 一、前言 分析完了CyclicBarrier後，下面分析CountDownLatch，CountDownLatch用於同步一個或多個任務，強制他們等待由其他任務執行的一組操作完成。C

HashMap 1.8 原始碼分析

1.HashMap的底層資料結構---陣列+單向連結串列 2.一個完整的節點存數資料，在java中一切皆物件，所以在HashMap中應該存在一個類 public class Node{      int hash；     String key;     O

JdbcTemplate 0.9版本原始碼分析

JdbcTemplate 核心方法： public void query(PreparedStatementCreator psc, RowCallbackHandler callbackHandler) throws DataAccessException {

《springsecurity原始碼分析》2.springsecurity原始碼分析之認證流程

Spring Security核心就是一系列的過濾器鏈，當一個請求來的時候，首先要通過過濾器鏈的校驗，校驗通過之後才會訪問使用者各種資訊。  SecurityContextPersistenceFilter 當一個請求來的時候，它會將session中的值傳入到該執

ArrayList集合（JDK1.8） 【集合框架】JDK1.8原始碼分析之ArrayList（六）

簡述   List是繼承於Collection介面，除了Collection通用的方法以外，擴充套件了部分只屬於List的方法。   常用子類  ？ArrayList介紹 1.資料結構   其底層的資料結構是陣列，陣列元素型別為Object型別，即可以存放所

HashMap1.8原始碼分析(紅黑樹)

轉載：https://segmentfault.com/a/1190000012926722?utm_source=tag-newest https://blog.csdn.net/weixin_40255793/article/details/80748946(方法全面) 方法 treeifyBin(

【JUC】JDK1.8原始碼分析之CountDownLatc

一、前言 分析完了CyclicBarrier後，下面分析CountDownLatch，CountDownLatch用於同步一個或多個任務，強制他們等待由其他任務執行的一組操作完成。CountDownLatch典型的用法是將一個程式分為n個互相獨立的可解決任務，

spark 2.3原始碼分析之ShuffleInMemorySorter

PackedRecordPointer 概述 PackedRecordPointer物件用一個64bit的long型變數來記錄record資訊： [24 bit partition number][13 bit memory page number][27 bit

spark 2.3原始碼分析之SortShuffleWriter

SortShuffleWriter 概述 SortShuffleWriter它主要是判斷在Map端是否需要本地進行combine操作。如果需要聚合，則使用PartitionedAppendOnlyMap；如果不進行combine操作，則使用PartitionedPairB

spark 2.3原始碼分析之ShuffleDependency

ShuffleDependency 成員變數 - ShuffleHandle 在ShuffleDependency中建立ShuffleHandle. 如前面的部落格所述，有以下三種ShuffleHandle： BypassMergeSortShuffleHandle

【 專欄 】- Redis 3.2.8 原始碼剖析註釋

Redis 3.2.8 原始碼剖析註釋 本專欄主要剖析 Redis 3.2.8 版本的原始碼，包含部分3.0.7版本的原始碼，並且結合圖片，更具體的理解Redis的底層實現。

Java中HashMap底層實現原理(JDK1.8)原始碼分析

在JDK1.6，JDK1.7中，HashMap採用位桶+連結串列實現，即使用連結串列處理衝突，同一hash值的連結串列都儲存在一個連結串列裡。但是當位於一個桶中的元素較多，即hash值相等的元素較多時，通過key值依次查詢的效率較低。而JDK1.8中，HashMap採用位桶+

Spark2.4.0 Dataset head 原始碼分析

Spark2.4.0 Dataset head 原始碼分析 更多資源 github: https://github.com/opensourceteams/spark-scala-maven-2.4.0 視訊 Spark2.4.0 Dataset head 原理分析(bilibili視訊

（轉載）Java中HashMap底層實現原理(JDK1.8)原始碼分析

近期在看一些java底層的東西，看到一篇分析hashMap不錯的文章，跟大家分享一下。 在JDK1.6，JDK1.7中，HashMap採用位桶+連結串列實現，即使用連結串列處理衝突，同一hash值的連結串列都儲存在一個連結串列裡。但是當位於一個桶中的元素較多，即hash值

Android6.0的Looper原始碼分析（1）

Android在Java標準執行緒模型的基礎上，提供了訊息驅動機制，用於多執行緒之間的通訊。而其具體實現就是Looper。 Android Looper的實現主要包括了3個概念：Message，MessageQueue，Handler，Looper。其中Message就是

nu-lb-nuc140板子 ucosii 2.86 原始碼分析（一）

分析用的原始碼: https://download.csdn.net/download/wowocpp/10890676 OSInit 函式 OS_ENTER_CRITICAL typedef unsigned int OS_CPU_SR; /* Define s

EventBus 2.4 原始碼分析

EventBus簡介 本篇基於EventBus 2.4撰寫。 Android optimized event bus that simplifies communication between Activities, Fragments, Threads,