向下遍歷 Webpack 模塊樹的最佳方式

Question

我正在處理一些與 Webpack 相關的項目，我需要在其中分析整個模塊樹。

目前我正在向上遍歷，使用module.reasons屬性，該屬性包含作為當前模塊父級的所有模塊。 但是，我找不到包含子模塊的模擬屬性。

我的遍歷算法基於 Webpack 的Module類，因為它應該能夠對任何類型的模塊執行遞歸。 （擴展Module的任何其他類的所有模塊實例）

在測試時，我看到了一個module.dependencies屬性，但它沒有在Module構造函數中定義，我找不到它是如何填充的。

關於如何向下遍歷的任何想法？ 是否還有其他一些我遺漏的財產？ 或者我應該使用不同的 Webpack 接口而不是直接從Module實例內部訪問樹？

更新：

我正在使用module.dependencies因為我已經確認它以某種方式存在於每個模塊中。 但是，它只列出靜態依賴項（例如： import {something} from 'some/module.js' ），而不列出動態依賴項（即使可解析），如（ import('some/module.js') ）。 任何幫助將不勝感激。 謝謝。

Answer 1

在進一步分析 Webpack 的源代碼后，我發現module.blocks屬性包含模塊內每個解析的“內部依賴塊”（內部聲明和賦值）的引用，包括動態import()語句。

module.blocks是一個block對象數組。 每個塊都有一個block.dependencies屬性，它是一個dependency對象數組。

您對作為ImportDependency實例的dependency對象感興趣。

像這樣的東西：

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;
}

在這里確認。