.36-浅析webpack源码之Parser类
眼看webpack4都出了,我还在撸3的源码,真的是捉急啊……
不过现在只是beta版本,等出稳定版本后跑跑4的源码去。
之前漏了一个东西没有讲,如下:
asyncLib.parallel([/**/], (err, results) => {
if (err) return callback(err);
loaders = results[0].concat(loaders, results[1], results[2]);
process.nextTick(() => {
callback(null, {
context: context,
request: loaders.map(loaderToIdent).concat([resource]).join("!"),
dependencies: data.dependencies,
userRequest,
rawRequest: request,
loaders,
resource,
resourceResolveData,
// 这个东西
parser: this.getParser(settings.parser)
});
});
});
在解析完入口文件路径与JS文件对应的babel-loader路径后,返回的包装对象多了一个parser属性,看似简单,实则麻烦的要死。
这里的参数settings.parser为undefined,来源如下:
const settings = {};
const useLoadersPost = [];
const useLoaders = [];
const useLoadersPre = [];
result.forEach(r => {
if (r.type === "use") {
// ...
} else {
// parser参数
settings[r.type] = r.value;
}
});
这里的参数来源于modules.rules的parser参数,一般情况下不会传吧,反正vue-cli中没有……
因此这里的parserOptions参数为undefined,直接看原型方法getParser:
getParser(parserOptions) {
// 默认键
let ident = "null";
// 检测参数
if (parserOptions) {
if (parserOptions.ident)
ident = parserOptions.ident;
else
ident = JSON.stringify(parserOptions);
}
// 尝试获取缓存
const parser = this.parserCache[ident];
if (parser)
return parser;
// 创建新的parser并设置缓存
return this.parserCache[ident] = this.createParser(parserOptions);
}
老套的尝试获取对应键的缓存值,如果不存在就新建一个,所有参数为undefined的默认键为null字符串。
createParser(parserOptions) {
// new一个Parser对象
const parser = new Parser();
// 触发事件流
this.applyPlugins2("parser", parser, parserOptions || {});
// 返回parser
return parser;
}
这个方法简单易懂,就是生成一个新的parser,但是每一行代码都是分量足足,让我联想到了vue源码中的parse方法……
Parser类
这东西就跟compiler、compilation对象一样,内容非常繁杂,干讲是没办法的,所以简单过一下构造,调用的时候跑内部方法。
class Parser extends Tapable {
constructor(options) {
super();
this.options = options;
this.scope = undefined;
this.state = undefined;
this.comments = undefined;
this.initializeEvaluating();
} initializeEvaluating() {
this.plugin("evaluate Literal", expr => {
switch (typeof expr.value) {
case "number":
return new BasicEvaluatedExpression().setNumber(expr.value).setRange(expr.range);
case "string":
return new BasicEvaluatedExpression().setString(expr.value).setRange(expr.range);
case "boolean":
return new BasicEvaluatedExpression().setBoolean(expr.value).setRange(expr.range);
}
if (expr.value === null)
return new BasicEvaluatedExpression().setNull().setRange(expr.range);
if (expr.value instanceof RegExp)
return new BasicEvaluatedExpression().setRegExp(expr.value).setRange(expr.range);
});
// 非常多的plugin... // 非常非常多的原型方法
}
}
这个类内容非常多,但是内容类型很简单,只有事件流的注入与一些原型方法,所以在初始化不会有任何实际动作。
这样就返回了一个包含大量事件流的Parser对象,之后apply的时候再回头解析。
parser事件流
这个事件流回头翻了好几节才找到,集中在第24节的大图中,插件列表如下:
compiler.apply(
new CompatibilityPlugin(),
new HarmonyModulesPlugin(options.module),
new AMDPlugin(options.module, options.amd || {}),
new CommonJsPlugin(options.module),
new LoaderPlugin(),
new NodeStuffPlugin(options.node),
new RequireJsStuffPlugin(),
new APIPlugin(),
new ConstPlugin(),
new UseStrictPlugin(),
new RequireIncludePlugin(),
new RequireEnsurePlugin(),
new RequireContextPlugin(options.resolve.modules, options.resolve.extensions, options.resolve.mainFiles),
new ImportPlugin(options.module),
new SystemPlugin(options.module)
);
NodeSourcePlugin
但是第一个事件是在NodeSourcePlugin插件中,注入地点如下:
class WebpackOptionsApply extends OptionsApply {
constructor() {
super();
} process(options, compiler) {
// ...
if (typeof options.target === "string") {
let JsonpTemplatePlugin;
let NodeSourcePlugin;
let NodeTargetPlugin;
let NodeTemplatePlugin; switch (options.target) {
case "web":
JsonpTemplatePlugin = require("./JsonpTemplatePlugin");
NodeSourcePlugin = require("./node/NodeSourcePlugin");
compiler.apply(
new JsonpTemplatePlugin(options.output),
new FunctionModulePlugin(options.output),
// 这里
new NodeSourcePlugin(options.node),
new LoaderTargetPlugin(options.target)
);
break;
// ...
}
// ...
}
// ...
}
}
感觉一下回到了2017年的感觉……
很遗憾,这个插件很快就挂了,源码简要如下:
// NodeSourcePlugin.js
params.normalModuleFactory.plugin("parser", function(parser, parserOptions) { if (parserOptions.node === false)
return; // ...more
});
由于传进来的parserOptions为空对象,所以直接返回。
剩下的均来源于后面的批量plugin。
CompatibilityPlugin、HarmonyModulesPlugin...
// CompatibilityPlugin.js
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => {
if (typeof parserOptions.browserify !== "undefined" && !parserOptions.browserify)
return; // ...
});
阵亡。
后面的HarmonyModulesPlugin、AMDPlugin、CommonJsPlugin、RequireJsStuffPlugin分别尝试获取parserOptions的对应属性,失败直接返回。
APIPlugin
这个没有阵亡,做了点事。
const REPLACEMENTS = {
__webpack_require__: "__webpack_require__", // eslint-disable-line camelcase
__webpack_public_path__: "__webpack_require__.p", // eslint-disable-line camelcase
__webpack_modules__: "__webpack_require__.m", // eslint-disable-line camelcase
__webpack_chunk_load__: "__webpack_require__.e", // eslint-disable-line camelcase
__non_webpack_require__: "require", // eslint-disable-line camelcase
__webpack_nonce__: "__webpack_require__.nc", // eslint-disable-line camelcase
"require.onError": "__webpack_require__.oe" // eslint-disable-line camelcase
};
const REPLACEMENT_TYPES = {
__webpack_public_path__: "string", // eslint-disable-line camelcase
__webpack_require__: "function", // eslint-disable-line camelcase
__webpack_modules__: "object", // eslint-disable-line camelcase
__webpack_chunk_load__: "function", // eslint-disable-line camelcase
__webpack_nonce__: "string" // eslint-disable-line camelcase
}; class APIPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
// set... params.normalModuleFactory.plugin("parser", parser => {
// 简单明了注入事件流
Object.keys(REPLACEMENTS).forEach(key => {
// 'expression __webpack_require__'等等
parser.plugin(`expression ${key}`, ParserHelpers.toConstantDependency(REPLACEMENTS[key]));
// 'evaluate typeof __webpack_require__'等等
parser.plugin(`evaluate typeof ${key}`, ParserHelpers.evaluateToString(REPLACEMENT_TYPES[key]));
});
});
});
}
} module.exports = APIPlugin;
十分的简单,根据两个内置的配置对象批量注入事件,通过ParserHelpers类来辅助生成事件函数。
该辅助类的两个方法源码如下:
ParserHelpers.toConstantDependency = function(value) {
// value来源于APIPlugin插件
// expr为触发事件流时给的参数 暂时不知道是什么
return function constDependency(expr) {
var dep = new ConstDependency(value, expr.range);
dep.loc = expr.loc;
this.state.current.addDependency(dep);
return true;
};
};
ParserHelpers.evaluateToString = function(value) {
// 一样的
return function stringExpression(expr) {
return new BasicEvaluatedExpression().setString(value).setRange(expr.range);
};
};
这里又引入了两个辅助类来生成新对象。
第一个方法有一个方法调用:this.state.current.addDependency,我是根本找不到定义的地点,不知道这个方法是如何执行的,尝试在控制台输出,结果发现整个打包过程中,根本就没有触发这两批事件流。
这就完全无法得知其作用了,所以这个插件暂时跳过,可以当做没有。
ConstPlugin
这个插件注入了三个事件流,简单看一下:
params.normalModuleFactory.plugin("parser", parser => {
parser.plugin("statement if", function(statement) {
// ...
});
parser.plugin("expression ?:", function(expression) {
// ...
});
parser.plugin("evaluate Identifier __resourceQuery", function(expr) {
// ...
});
parser.plugin("expression __resourceQuery", function() {
// ...
});
});
UseStrictPlugin
// UseStrictPlugin.js
params.normalModuleFactory.plugin("parser", (parser) => {
const parserInstance = parser;
parser.plugin("program", (ast) => {
// ...
});
});
注入program事件流。
后面的RequireIncludePlugin、RequireEnsurePlugin、RequireContextPlugin、ImportPlugin、SystemPlugin插件全部跳过,内容我就不贴进来了。
总的来说,由于传进来的options为空对象,这个parser事件流的触发毫无意义,只是单纯注入了几个事件流,最后返回了这个parser对象,作为了request的一个对象参数,具体原型方法的调用后面再看。
.36-浅析webpack源码之Parser类的更多相关文章
- .39-浅析webpack源码之parser.parse
因为换了个工作,所以博客停了一段时间. 这是上个月留下来的坑,webpack的源码已经不太想看了,又臭又长,恶心的要死,想去看node的源码……总之先补完这个 上一节完成了babel-loader对J ...
- 从Webpack源码探究打包流程,萌新也能看懂~
简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...
- .30-浅析webpack源码之doResolve事件流(1)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- .34-浅析webpack源码之事件流make(3)
新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolv ...
- .30-浅析webpack源码之doResolve事件流(2)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- .3-浅析webpack源码之预编译总览
写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...
- JDK源码之Integer类分析
一 简介 Integer是int基本类型的包装类,同样继承了Number类,实现了Comparable接口,String类中的一些转化方法就使用了Integer类中的一些API,且fianl修饰不可继 ...
- webpack源码-依赖收集
webpack源码-依赖收集 version:3.12.0 程序主要流程: 触发make钩子 Compilation.js 执行EntryOptionPlugin 中注册的make钩子 执行compi ...
- Struts2 源码分析——Result类实例
本章简言 上一章笔者讲到关于DefaultActionInvocation类执行action的相关知识.我们清楚的知道在执行action类实例之后会相关处理返回的结果.而这章笔者将对处理结果相关的内容 ...
随机推荐
- OS基础:动态链接库(一)
动态链接库(一) 1.新建文件夹,命名lpt 2.用vc6.0建立一个空工程(Win 32 Dynamic-Link Library),名称:lptDll1 3.新建C++文件,命名:lptDll1: ...
- 关于2011年meng-meng组产品《豆酱》的Review
这个组是一个做手机应用的组,比较有特色. 经过我们的一致讨论,得出我们组对前辈的有关选题.团队.产品等几个方面的看法,以及我们的感想. 选题的特点: 这个选题对于一个短期项目来说是很合适的,经过较为详 ...
- Windows 下环境变量设置(命令行)
0. 背景 查了一下 SETX 命令可以实现,先简单看了下帮助.以后再写一个实例. 1. SETX /? 输出内容: SetX 有三种使用方式: 语法 1: SETX [/S system [/ ...
- 动态执行 VB.NET 和 C# 代码
有时候我们需要尝试动态地与一些代码进行交互,而不是只能执行程序内已编死的代码,那该怎么办呢?我首先推荐各种脚本语言,如Javascript.Lua.Python等等,这些脚本语言有很多优秀的第三方类库 ...
- ServiceStack NetCoreAppSettings 配置文件读取和设置
假设Node和npm已经安装 npm install -g @servicestack/cli 执行命令dotnet-new selfhost SSHost 这样就创建了ServiceStack的控制 ...
- asp.net mvc+httpclient+asp.net mvc api入门篇
第一步:创建一个ASP.NET MVC API项目 第二步:在api项目里面创建一个类 public class Student { public int Id { get; set; } publi ...
- 【文文殿下】 [SDOI2013]保护出题人 题解
题解 我们把伤害-时间图像画出来.然后维护一下僵尸血量的前缀和.最好情况肯定是有一个僵尸恰好死在戴夫家门口.我们把原点到其他n个点的斜率最大的一个累积到答案. 发现每添加一个点,其他所有点的坐标都变了 ...
- Flask中的before_request和after_request
1.@app.before_request 在请求(request)之前做出响应 @app.before_request 也是一个装饰器,他所装饰的函数,都会在请求进入视图函数之前执行 2.@app. ...
- Yii2 Apache + Nginx 路由重写
一.什么是路由重写 原本的HTTP访问地址: www.test.com/index.php?r=post/view&id=100 表示这个请求将由PostController 的 action ...
- pm2 官方文档 学习笔记
一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...