javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > webpack DefinePlugin入口

webpack DefinePlugin源码入口解析

作者:某时橙

这篇文章主要为大家介绍了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到底做了什么,首先得理解

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

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入口的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文