webpack DefinePlugin源码入口解析
作者:某时橙
正文
DefinePlugin是webpack的一个官方内置插件,它允许在 编译时 将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时,非常有用。例如,如果想在开发构建中进行日志记录,而不在生产构建中进行,就可以定义一个全局常量去判断是否记录日志。这就是 DefinePlugin 的发光之处,设置好它,就可以忘掉开发环境和生产环境的构建规则。
new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), BROWSER_SUPPORTS_HTML5: true, TWO: '1+1', 'typeof window': JSON.stringify('object'), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), });
demo
console.log(PRODUCTION,VERSION,BROWSER_SUPPORTS_HTML5,TWO,typeof window,process.env.NODE_ENV);
源码入口
parser是一个hookMap,它就相当于一个管理hook的Map结构。
apply(compiler) { const definitions = this.definitions; compiler.hooks.compilation.tap( "DefinePlugin", (compilation, { normalModuleFactory }) => { //... normalModuleFactory.hooks.parser .for("javascript/auto") .tap("DefinePlugin", handler); normalModuleFactory.hooks.parser .for("javascript/dynamic") .tap("DefinePlugin", handler); normalModuleFactory.hooks.parser .for("javascript/esm") .tap("DefinePlugin", handler); //... }) }
parser的call时机在哪?完全就在于NormalModuleFactory.createParser时机
所以这个钩子的语义就是parser创建时的初始化钩子。
createParser(type, parserOptions = {}) { parserOptions = mergeGlobalOptions( this._globalParserOptions, type, parserOptions ); const parser = this.hooks.createParser.for(type).call(parserOptions); if (!parser) { throw new Error(`No parser registered for ${type}`); } this.hooks.parser.for(type).call(parser, parserOptions); return parser; }
好,现在让我们看看具体初始化了什么逻辑。
首先现在program上定义一个钩子,在遍历JavaScript AST前(该时机由program定义位置所知),注册buildInfo.valueDependencies=new Map();
并定义
buildInfo.valueDependencies.set(VALUE_DEP_MAIN, mainValue);
const handler = parser => { const mainValue = compilation.valueCacheVersions.get(VALUE_DEP_MAIN); //mainValue是在DefinePlugin最初初始化时定义到compilation.valueCacheVersions上的 parser.hooks.program.tap("DefinePlugin", () => { const { buildInfo } = parser.state.module; if (!buildInfo.valueDependencies) buildInfo.valueDependencies = new Map(); buildInfo.valueDependencies.set(VALUE_DEP_MAIN, mainValue); }); //.... walkDefinitions(definitions, ""); }
然后开始遍历Definitions(这是用户提供的配置项,比如 PRODUCTION: JSON.stringify(true),)
const walkDefinitions = (definitions, prefix) => { Object.keys(definitions).forEach(key => { const code = definitions[key]; if ( code && typeof code === "object" && !(code instanceof RuntimeValue) && !(code instanceof RegExp) ) { //如果是对象就递归调用 walkDefinitions(code, prefix + key + "."); applyObjectDefine(prefix + key, code); return; } applyDefineKey(prefix, key); applyDefine(prefix + key, code); }); };
applyDefine
const applyDefine = (key, code) => { const originalKey = key; const isTypeof = /^typeof\s+/.test(key); if (isTypeof) key = key.replace(/^typeof\s+/, ""); let recurse = false; let recurseTypeof = false; if (!isTypeof) { parser.hooks.canRename.for(key).tap("DefinePlugin", () => { addValueDependency(originalKey); return true; }); parser.hooks.evaluateIdentifier .for(key) .tap("DefinePlugin", expr => { /** * this is needed in case there is a recursion in the DefinePlugin * to prevent an endless recursion * e.g.: new DefinePlugin({ * "a": "b", * "b": "a" * }); */ if (recurse) return; addValueDependency(originalKey); recurse = true; const res = parser.evaluate( toCode( code, parser, compilation.valueCacheVersions, key, runtimeTemplate, null ) ); recurse = false; res.setRange(expr.range); return res; }); parser.hooks.expression.for(key).tap("DefinePlugin", expr => { addValueDependency(originalKey); const strCode = toCode( code, parser, compilation.valueCacheVersions, originalKey, runtimeTemplate, !parser.isAsiPosition(expr.range[0]) ); if (/__webpack_require__\s*(!?.)/.test(strCode)) { return toConstantDependency(parser, strCode, [ RuntimeGlobals.require ])(expr); } else if (/__webpack_require__/.test(strCode)) { return toConstantDependency(parser, strCode, [ RuntimeGlobals.requireScope ])(expr); } else { return toConstantDependency(parser, strCode)(expr); } }); } parser.hooks.evaluateTypeof.for(key).tap("DefinePlugin", expr => { /** * this is needed in case there is a recursion in the DefinePlugin * to prevent an endless recursion * e.g.: new DefinePlugin({ * "typeof a": "typeof b", * "typeof b": "typeof a" * }); */ if (recurseTypeof) return; recurseTypeof = true; addValueDependency(originalKey); const codeCode = toCode( code, parser, compilation.valueCacheVersions, originalKey, runtimeTemplate, null ); const typeofCode = isTypeof ? codeCode : "typeof (" + codeCode + ")"; const res = parser.evaluate(typeofCode); recurseTypeof = false; res.setRange(expr.range); return res; }); parser.hooks.typeof.for(key).tap("DefinePlugin", expr => { addValueDependency(originalKey); const codeCode = toCode( code, parser, compilation.valueCacheVersions, originalKey, runtimeTemplate, null ); const typeofCode = isTypeof ? codeCode : "typeof (" + codeCode + ")"; const res = parser.evaluate(typeofCode); if (!res.isString()) return; return toConstantDependency( parser, JSON.stringify(res.string) ).bind(parser)(expr); }); };
hooks.expression
在applyDefine中定义的hooks.expression定义了对表达式的替换处理。
当代码解析到语句【key】时,便会触发如下钩子逻辑,不过先别急,我们先搞清楚expression钩子在何处会被触发。
parser.hooks.expression.for(key).tap("DefinePlugin", expr => { //... }
触发时机
单单指demo中的情况
比如PRODUCTION会被acron解析为Identifier
而在parse阶段中,会有这么一句
if (this.hooks.program.call(ast, comments) === undefined) { //...其他解析语句 this.walkStatements(ast.body); } //然后会走到这 walkIdentifier(expression) { this.callHooksForName(this.hooks.expression, expression.name, expression); } //最后 const hook = hookMap.get(name);//获取hook if (hook !== undefined) { const result = hook.call(...args); //执行hook if (result !== undefined) return result; }
具体逻辑
parser.hooks.expression.for(key).tap("DefinePlugin", expr =>{ addValueDependency(originalKey); const strCode = toCode( code, parser, compilation.valueCacheVersions, originalKey, runtimeTemplate, !parser.isAsiPosition(expr.range[0]) ); if (/__webpack_require__\s*(!?.)/.test(strCode)) { return toConstantDependency(parser, strCode, [ RuntimeGlobals.require ])(expr); } else if (/__webpack_require__/.test(strCode)) { return toConstantDependency(parser, strCode, [ RuntimeGlobals.requireScope ])(expr); } else { return toConstantDependency(parser, strCode)(expr); } }); }
addValueDependency
//这里会影响needBuild的逻辑,是控制是否构建模块的 const addValueDependency = key => { const { buildInfo } = parser.state.module; //这里就可以理解为设置key,value buildInfo.valueDependencies.set( VALUE_DEP_PREFIX + key, compilation.valueCacheVersions.get(VALUE_DEP_PREFIX + key) ); };
要搞懂addValueDependency到底做了什么,首先得理解
- compilation.valueCacheVersions这个map结构做了什么?
- buildInfo.valueDependencies这里的依赖收集起来有什么用?
toCode获取strCode
toConstantDependency
设置ConstDependency静态转换依赖。
exports.toConstantDependency = (parser, value, runtimeRequirements) => { return function constDependency(expr) { const dep = new ConstDependency(value, expr.range, runtimeRequirements); dep.loc = expr.loc; parser.state.module.addPresentationalDependency(dep); return true; }; };
ConstDependency是如何替换源码的?
出处在seal阶段
if (module.presentationalDependencies !== undefined) { for (const dependency of module.presentationalDependencies) { this.sourceDependency( module, dependency, initFragments, source, generateContext ); } }
sourceDenpendency,会获取依赖上的执行模板
const constructor = /** @type {new (...args: any[]) => Dependency} */ ( dependency.constructor ); //template可以理解为代码生成模板 const template = generateContext.dependencyTemplates.get(constructor); ///.... template.apply(dependency, source, templateContext);//然后执行
而ConstPendency的执行模板直接替换了源码中的某个片段内容
const dep = /** @type {ConstDependency} */ (dependency); if (dep.runtimeRequirements) { for (const req of dep.runtimeRequirements) { templateContext.runtimeRequirements.add(req); } } if (typeof dep.range === "number") { source.insert(dep.range, dep.expression); return; } source.replace(dep.range[0], dep.range[1] - 1, dep.expression);
hooks.canRename
在applyDefine中,也有hooks.canRename的调用:
parser.hooks.canRename.for(key).tap("DefinePlugin", () => { addValueDependency(key); return true; });
在这里其实就是允许key可以被重命名,并借机收集key作为依赖,但这个重命名的工作不是替换,并不在definePlugin内做,有点点奇怪。
详细:
该hook会在js ast遍历时多处被call
- walkAssignmentExpression 赋值表达式
- _walkIIFE CallExpression 函数调用表达式发现是IIFE时
- walkVariableDeclaration 声明语句
canRename有什么用?其实是配合rename使用的钩子
当其返回true,rename钩子才能起作用。如下:
walkVariableDeclaration(statement) { for (const declarator of statement.declarations) { switch (declarator.type) { case "VariableDeclarator": { const renameIdentifier = declarator.init && this.getRenameIdentifier(declarator.init); if (renameIdentifier && declarator.id.type === "Identifier") { const hook = this.hooks.canRename.get(renameIdentifier); if (hook !== undefined && hook.call(declarator.init)) { // renaming with "var a = b;" const hook = this.hooks.rename.get(renameIdentifier); if (hook === undefined || !hook.call(declarator.init)) { this.setVariable(declarator.id.name, renameIdentifier); } break; } } //... } } } }
官方也有所介绍这个钩子
hooks.typeof
parser.hooks.typeof.for(key).tap("DefinePlugin", expr => { addValueDependency(originalKey); const codeCode = toCode( code, parser, compilation.valueCacheVersions, originalKey, runtimeTemplate, null ); const typeofCode = isTypeof ? codeCode : "typeof (" + codeCode + ")"; const res = parser.evaluate(typeofCode); if (!res.isString()) return; return toConstantDependency( parser, JSON.stringify(res.string) ).bind(parser)(expr); });
先执行typeof再用toConstantDependency替换。。
以上就是webpack DefinePlugin源码入口解析的详细内容,更多关于webpack DefinePlugin入口的资料请关注脚本之家其它相关文章!