向下遍历 Webpack 模块树的最佳方式

Question

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

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

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

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

知道如何向下遍历吗？我还缺少其他属性吗？或者我应该使用不同的 Webpack 接口而不是直接从 Module 个实例内部访问树？

更新：

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

Answer 1

进一步分析 Webpack 的源代码后，我发现 module.blocks 属性为模块中每个已解析的 'internal dependency block' （内部声明和赋值）保存了一个引用，包括动态 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;
}

确认here.

向下遍历 Webpack 模块树的最佳方式

Best way to traverse Webpack modules tree downwards

javascript

webpack

module

bundler