javascript - 有没有办法挂接到 Webpack 的 AST 以使其识别新的模块格式？

Question

简短版:

我们如何操作最终输出包的 AST，以及加载器内部文件的 AST？在这两种情况下，我都想操纵现有的 AST，而不是我正在做的是解析源代码并制作新的 AST。我正在做的事情很慢，而且我知道 Webpack 一定已经制作了 AST，所以我想避免重复工作。

长版:

例如，假设我有一堆以类似于(但不完全)AMD 模块的格式编写的文件:

module({
  Foo: '/path/to/Foo',
  Bar: '/path/to/Bar',
  Baz: '/path/to/Baz',
}, function(imports) {
  console.log(imports) // {Foo:..., Bar:... Baz:...}
})

不同的是它叫module而不是 define , dependencies 参数是导入名称到模块路径的映射而不是模块路径数组，并且模块主体函数接收到 import。对象包含所有请求的导入，而不是每个请求的导入一个参数。

上面类似下面的AMD格式，输出相同:

define([
  '/path/to/Foo',
  '/path/to/Bar',
  '/path/to/Baz',
], function(Foo, Bar, Baz) {
  console.log({Foo, Bar, Baz}) // {Foo:..., Bar:... Baz:...}
})

推荐的 Hook Webpack 的方法是什么，使 Webpack 能够理解文件(能够知道文件有什么依赖关系)，以便最终构建包含在此 module() 中编写的文件的 bundle 格式？

我已经尝试过一种方法:我制作了一个自定义加载器，它以字符串形式接收文件源，解析它并创建 AST，转换 AST，然后在 AMD define() 中输出代码Webpack 理解的格式。

但是，我觉得这很慢，因为如果有很多文件并且它们很大，那么从每个文件解析和制作 AST 似乎是多余的，因为我敢打赌 Webpack 已经开始这样做了。有什么方法可以从 Webpack 获取 AST 并在 Webpack 想要扫描它的依赖项之前对其进行转换，以便我可以将 AST 转换为 AMD 格式(或任何可识别的格式)，以便 Webpack 最终可以使用该文件？还有其他方法吗？

Answer 1

我想你会发现在依赖解析的时候会用到loader。

基本上，解析器需要源代码才能完成它的工作。因此，在当前解析阶段遇到的任何 import/require 语句(依赖项)需要:得到解决并且: b．在它可以被解析之前加载。如果您连接到增强型解析包的“解析步骤”，您可以控制台注销解析器转换的状态转换，通常最终会触发“创建模块”插件。

Hook 到“解决步骤”:

compiler.plugin('after-resolvers', (compiler) => {
    compiler.resolvers.normal.plugin('resolve-step', function (type, request){
        console.log("resolve-step type:["+type+"], 
            path:["+request.path+"], request:["+request.request+"]");   
        });
});

Hook 到“创建模块”:

compiler.plugin('compilation', (compilation, params) => {
    params.normalModuleFactory.plugin("create-module", (data) => {
        console.log('create-module: raw-request: '+data.rawRequest);
    }
}

希望这对您有所帮助。