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

2018-06-24 01:19:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  在上一节中,最后返回了一个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.、判断是文件还是文件夹

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript之DOM对象的获取

下一篇:swiper动态改变滑动内容