.29-浅析webpack源码之doResolve事件流(1)

　　在上一节中，最后返回了一个resolver，本质上就是一个Resolver对象：

resolver = new Resolver(fileSystem);

　　这个对象的构造函数非常简单，只是简单的继承了Tapable，并接收了fileSystem参数：

function Resolver(fileSystem) {

    Tapable.call(this);

    this.fileSystem = fileSystem;

}

module.exports = Resolver;

resolve

　　而在make事件流中，调用的正是该类的原型方法resolve，现在可以进行看一眼了：

/*

    context => { issuer: '', compiler: undefined }

    path => 'd:\\workspace\\doc'

    request => './input.js'

    callback => [Function]

*/

Resolver.prototype.resolve = function resolve(context, path, request, callback) {

    if (arguments.length === 3) {

        throw new Error("Signature changed: context parameter added");

    }

    var resolver = this;

    // 包装参数

    var obj = {

        context: context,

        path: path,

        request: request

    };

    var localMissing;

    var log;

    // message => resolve './input.js' in 'd:\\workspace\\doc'

    var message = "resolve '" + request + "' in '" + path + "'";

    function writeLog(msg) {

        log.push(msg);

    }

    function logAsString() {

        return log.join("\n");

    }

    function onError(err, result) { /**/ }

    function onResolve(err, result) { /**/ }

    // 这两个并不存在

    onResolve.missing = callback.missing;

    onResolve.stack = callback.stack;

    // 调用另一个原型方法

    return this.doResolve("resolve", obj, message, onResolve);

};

　　需要注意的是，该方法会在webpack编译期间被调用多次，这里的参数仅仅是第一次被调用时的。

doResolve

　　简单的说，resolve方法将参数进行二次包装后，调用了另外一个原型方法doResolve，源码整理如下：

/*

    type => 'resolve'

    request =>

        {

            context: { issuer: '', compiler: undefined },

            path: 'd:\\workspace\\doc',

            request: './input.js'

        }

    message => resolve './input.js' in 'd:\\workspace\\doc'

    callback => doResolve()

*/

Resolver.prototype.doResolve = function doResolve(type, request, message, callback) {

    var resolver = this;

    // stackLine => resolve: (d:\workspace\doc) ./input.js

    var stackLine = type + ": (" + request.path + ") " +

        (request.request || "") + (request.query || "") +

        (request.directory ? " directory" : "") +

        (request.module ? " module" : "");

    var newStack = [stackLine];

    // 暂无

    if (callback.stack) { /**/ }

    // 没这个事件流

    resolver.applyPlugins("resolve-step", type, request);

    // before-resolve

    var beforePluginName = "before-" + type;

    // 检测是否存在对应的before事件流

    if (resolver.hasPlugins(beforePluginName)) { /**/ }

    // 走正常流程

    else {

        runNormal();

    }

}

　　由于callback的missing、stack属性均为undefined，所以会直接跳过那个if判断。

　　而事件流resolve-step、before-resolve也不存在，所以会直接走最后的else，进入runNormal方法。

　　这里全面描述一下doResolve，方法内部有5个函数，分别名为beforeInnerCallback、runNormal、innerCallback、runAfter、afterInnerCallback，所有的callback函数都负责包装对应事件流的回调函数。

　　源码如下：

// 先判断是否存在before-type事件流

if (resolver.hasPlugins(beforePluginName)) {

    // 触发完调用回调

    resolver.applyPluginsAsyncSeriesBailResult1(beforePluginName, request, createInnerCallback(beforeInnerCallback, {

        log: callback.log,

        missing: callback.missing,

        stack: newStack

    }, message && ("before " + message), true));

}

// 不存在跳过直接触发type事件流

else {

    runNormal();

}

function beforeInnerCallback(err, result) {

    if (arguments.length > 0) {

        if (err) return callback(err);

        if (result) return callback(null, result);

        return callback();

    }

    // 这里进入下一阶段

    runNormal();

}

// 触发type事件流

function runNormal() {

    if (resolver.hasPlugins(type)) { /**/ } else {

        runAfter();

    }

}

function innerCallback(err, result) { /**/ }

// 触发after-type

function runAfter() {

    var afterPluginName = "after-" + type;

    // 这里就是直接调用callback了

    if (resolver.hasPlugins(afterPluginName)) { /**/ } else {

        callback();

    }

}

function afterInnerCallback(err, result) { /**/ }

　　可以看到逻辑很简单，每一个事件流type存在3个类型：before-type、type、after-type，doResolve会尝试依次触发每一个阶段的事件流。

　　在上面的例子中，因为不存在before-resolve事件流，所以会调用runNormal方法去触发resolve的事件流。

　　如果存在，触发对应的事件流，并在回调函数中触发下一阶段的事件流。

　　所以这里的调用就可以用一句话概括：尝试触发before-resolve、resolve、after-resolve事件流后，调用callback。

unsafeCache

　　resolve事件流均来源于上一节第三部分注入的开头，如下：

// resolve

if (unsafeCache) {

    plugins.push(new UnsafeCachePlugin("resolve", cachePredicate, unsafeCache, cacheWithContext, "new-resolve"));

    plugins.push(new ParsePlugin("new-resolve", "parsed-resolve"));

} else {

    plugins.push(new ParsePlugin("resolve", "parsed-resolve"));

}

UnsafeCachePlugin

　　这个unsafeCache虽然不知道是啥，但是一般不会去设置，默认情况下是true，因此进入UnsafeCachePlugin插件，构造函数如下：

/*

    source => resolve

    filterPredicate => function(){return true}

    cache => {}

    withContext => false

    target => new-resolve

 */

function UnsafeCachePlugin(source, filterPredicate, cache, withContext, target) {

    this.source = source;

    this.filterPredicate = filterPredicate;

    this.withContext = withContext;

    this.cache = cache || {};

    this.target = target;

}

　　基本上只是对传入参数的获取，直接看事件流的内容：

function getCacheId(request, withContext) {

    // 直接用配置对象的字符串形式作为缓存对象key

    // 貌似vue源码的compile也是这样的

    return JSON.stringify({

        context: withContext ? request.context : "",

        path: request.path,

        query: request.query,

        request: request.request

    });

}

UnsafeCachePlugin.prototype.apply = function(resolver) {

    var filterPredicate = this.filterPredicate;

    var cache = this.cache;

    var target = this.target;

    var withContext = this.withContext;

    // 这里注入resolve事件流

    /*

        request =>

        {

            context: { issuer: '', compiler: undefined },

            path: 'd:\\workspace\\doc',

            request: './input.js'

        }

        callback => createInnerCallback(innerCallback,{...})

    */

    resolver.plugin(this.source, function(request, callback) {

        // 这里永远是true

        if (!filterPredicate(request)) return callback();

        // 尝试获取缓存

        var cacheId = getCacheId(request, withContext);

        var cacheEntry = cache[cacheId];

        if (cacheEntry) {

            return callback(null, cacheEntry);

        }

        // 这里再次调用了doResolve函数

        // target => new-resolve

        resolver.doResolve(target, request, null, createInnerCallback(function(err, result) {

            if (err) return callback(err);

            if (result) return callback(null, cache[cacheId] = result);

            callback();

        }, callback));

    });

};

　　这样就很明显了，resolve事件只是为了获取缓存，如果不存在缓存，就再次调用doResolve方法，这一次传入的type为new-resolve。

ParsePlugin

　　new-resolve事件流并不存在before-xxx或者after-xxx的情况，所以直接看事件流本身。注入地点在UnsafeCachePlugin插件的后面。

　　从上面的if/else可以看出，无论如何都会调用该插件，只是会根据unsafeCache的值来决定是否取缓存。

　　这个插件内容比较简单暴力，简答过一下：

// source => new-resolve

// target => parsed-resolve

function ParsePlugin(source, target) {

    this.source = source;

    this.target = target;

}

module.exports = ParsePlugin;

ParsePlugin.prototype.apply = function(resolver) {

    var target = this.target;

    resolver.plugin(this.source, function(request, callback) {

        // 解析

        var parsed = resolver.parse(request.request);

        // 合并对象

        var obj = Object.assign({}, request, parsed);

        if (request.query && !parsed.query) {

            obj.query = request.query;

        }

        if (parsed && callback.log) {

            if (parsed.module)

                callback.log("Parsed request is a module");

            if (parsed.directory)

                callback.log("Parsed request is a directory");

        }

        // 触发target的doResolve

        resolver.doResolve(target, obj, null, callback);

    });

};

　　基本上都是一个套路了，触发事件流，做点什么，然后最后调用doResolve触发下一轮。

　　这里的核心就是parse方法，估计跟vue源码的parse差不多，比较麻烦，下一节再讲。

Resolver.prototype.parse

　　这个parse方法超级简单，如下：

Resolver.prototype.parse = function parse(identifier) {

    if (identifier === "") return null;

    var part = {

        request: "",

        query: "",

        module: false,

        directory: false,

        file: false

    };

    // 根据问号切割参数

    var idxQuery = identifier.indexOf("?");

    if (idxQuery === 0) {

        part.query = identifier;

    } else if (idxQuery > 0) {

        part.request = identifier.slice(0, idxQuery);

        part.query = identifier.slice(idxQuery);

    } else {

        part.request = identifier;

    }

    if (part.request) {

        // 判断是文件还是文件夹

        part.module = this.isModule(part.request);

        part.directory = this.isDirectory(part.request);

        // 去掉文件夹最后的斜杠

        if (part.directory) {

            part.request = part.request.substr(0, part.request.length - 1);

        }

    }

    return part;

};

/*

    匹配以下内容开头的字符串

    1 => .

    2 => ./ or .\

    3 => ..

    4 => ../ or ..\

    5 => /

    6 => A-Z:/ or A-Z:\

*/

var notModuleRegExp = /^\.$|^\.[\\\/]|^\.\.$|^\.\.[\/\\]|^\/|^[A-Z]:[\\\/]/i;

Resolver.prototype.isModule = function isModule(path) {

    return !notModuleRegExp.test(path);

};

/*

    匹配以\ or /结尾的字符串

*/

var directoryRegExp = /[\/\\]$/i;

Resolver.prototype.isDirectory = function isDirectory(path) {

    return directoryRegExp.test(path);

};

　　内容很简单，就做了2件事：

1、根据问号切割参数

2.、判断是文件还是文件夹

　　最后返回了信息组成的对象。

巴特西

.29-浅析webpack源码之doResolve事件流(1)

最新文章

热门文章