Overview of Tapable

Tapable address: [tapable-0.2]

Tapable is the core framework of WebPack (API 4.0 + has changed). It is an event-based framework, also known as publish/subscribe mode, or observer mode. The entire life cycle of WebPack and its open custom plug-in system are dependent on Tapable support. Studying how it works is the first step to reading the WebPack source code. The code of the master branch of the official warehouse is reconstructed by ES6. The modular split is very fine, and a lot of non-core logic is added, which is difficult to read. Recommended from the official warehouse in the 0.2 version of the branch to start learning, the entire source code only 400 lines, relatively easy to understand.

Tapable -0.2 source code analysis

2.1 Code Structure

/ / the class definition
function Tapable() {
	this._plugins = {};
}
// Module export
module.exports = Tapable;
// Defines many internal and prototype methods.Copy the code

Tapable is essentially a class-defined module.

2.2 Event listening method

Tapable registers event listeners with the prototype method tapable.prototype. plugin.

This code is not too complicated, calling the plugin method to register an event is easy to understand by referring to the addEventListener() method in the browser environment. The logic is to store callback functions grouped by event name and centrally manage them in tapable instances.

// The __plugin property mounts callback functions for each registered event
tapable.__plugins = {
   'click':[fn1, fn2, fn3],
   'mousedown':[fn21,fn22,fn23]
    ...
}

Copy the code

2.3 Event triggering method

Tapable provides many ways to trigger events, and for its basic functionality refer to dispatchEvent() in the browser environment.

The event triggering methods in Tapable can be grouped by name into the following large groups:

  • waterfallMethod passes the execution result of the last listen to the next
  • bailResultThe method only executes to the first listener that does not return undefined
  • SeriesThe method executes the asynchronous listener in a linear manner, starting only after the previous one finishes
  • ParallelMethod executes all asynchronous listening in parallel

Typical methods in Tapable are as follows:

  • Tapable.prototype.applyPlugins( )

A synchronized method that takes any argument, looks up the array of listeners with the first parameter as the event name, executes the apply() method of the listeners in turn, and passes the apply() method any parameters other than the name at the time of the call when triggered.

  • Tapable.prototype.applyPluginsWaterfall( )

Synchronous method, which takes arbitrary arguments and returns the second argument (init) if the specified event does not register a listener, otherwise the apply() method of the listeners is executed in sequence, and the args passed in is the return value of the previous apply() method executed before the previous listener. Waterfall flow is a nice name for the method.

  • Tapable.prototype.applyPluginsBailResult( )

A synchronized method that takes any argument, executes the listener’s apply() method in turn and returns a value until one of apply() returns a result that is not undefined, then stops execution and returns the result.

  • Tapable.prototype.applyPluginsAsync( )

Asynchronously executes methods that listen for callbacks. This method is executed sequentially, waiting until the first plug-in has finished executing before the next plug-in is executed. This is done by passing the next plug-in as a callback to the first plug-in and calling the next listening plug-in at the end of the apply() body (or asynchronous method) of the first plug-in. An iterator is implemented using closures, the variable is recorded in the applyPluginsAsync() method (variable I), and a reference to I is kept in the callback function next().

For example, plug-ins that need to be executed with the applyPluginsAsync() method need to execute the callback explicitly in the Apply method:

class Plugin1{
	apply(info){
        var callback = Array.prototype.pop.call(arguments[1]);
        // Callback is the named function next() in the source code.callback(); }}Copy the code

Other asynchronous methods are similar and will not be repeated.

The asynchronous method definition of the source code uses copyProperties() to handle the two functions. I have tried many times and this method has not been executed. In fact, the next function has been added to the parameter array and continued execution.

Overview of Tapable1.0

Tapable address: [tapable-1.0]

Tapable has been greatly improved in version 1.0. The entire framework has been rewritten using ES6 syntax. In addition to changing the API, it has been significantly upgraded in terms of the definition of plug-ins. Subdivided event hooks (* hooks), new methods for triggering events (tap,tapAsync,tapPromise), etc., but the basic requirements for implementation are consistent and can be learned by interested readers themselves.

Webpackage 4.0 each to break (8) tapable article source: Bloggarden copyright belongs to the author all. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.