时间戳

首页 > 解决方案 > 向下遍历 Webpack 模块树的最佳方法

javascript - 向下遍历 Webpack 模块树的最佳方法

问题描述

我正在处理一些与 Webpack 相关的项目，我需要在其中分析整个模块树。

目前我正在向上遍历，使用该module.reasons属性，该属性具有当前模块的所有父模块。但是，我找不到包含子模块的模拟属性。

我将遍历算法基于 Webpack 的Module类，因为它应该能够对任何类型的模块执行递归。（任何其他扩展类的所有模块实例Module）

在测试时，我看到了一个module.dependencies属性，但它没有在Module构造函数中定义，我找不到它是如何填充的。

关于如何向下遍历的任何想法？我还缺少其他一些财产吗？或者我应该使用不同的 Webpack 接口而不是直接从内部Module实例访问树？

更新：

我正在使用module.dependencies，因为我已经确认它以某种方式存在于每个模块上。但是，它只列出了静态依赖项（EX: import {something} from 'some/module.js'），而不是动态依赖项（即使是可解析的），例如 ( import('some/module.js'))。任何帮助将不胜感激。谢谢。

标签： javascriptwebpackmodulebundler

解决方案

在进一步分析 Webpack 的源代码后，我发现该module.blocks属性包含模块内每个已解析的“内部依赖块”（内部声明和分配）的引用，包括动态import()语句。

module.blocks是一个block对象数组。每个块都有一个block.dependencies属性，它是一个dependency对象数组。

您对作为dependency的实例的对象感兴趣ImportDependency。

像这样的东西：

function getAllChildModules(module) {
    const childModules = [];

    // GET STATIC CHILD MODULES
    module.dependencies.forEach((dep) => {
        childModules.push(dep.module);
    });

    // GET DYNAMIC CHILD MODULES
    module.blocks.forEach((blk) => {
        blk.dependencies.forEach((dep) => {
            if (dep.constructor.name === 'ImportDependency') {
                childModules.push(dep.module);
            }
        });
    });

    return childModules;
}

在这里确认。

推荐阅读