Question

我想创建一个Webpack加载器（或插件），该加载器（或插件）可以将对某个方法的调用替换为在编译过程中此方法返回的结果。例如，假设我有一个名为 transpile_time.js 的文件：

import {SomeUsefullStuff} from 'a_very_cool_lib';   //<-- this should be resolved correctly

module.exports = function{
   //let's assume that 'a_very_cool_lib' is used somewhere here
   return 'console.log(\'tralala\')';
}

而且，我还有另一个名为 App.ts 的文件：

import {default as tt} from './transpile-time';
....
function someFunc(){
  ...
  tt();      // <------ I want this code to be replaced to 
             // 'console.log(\'tralala\')'
             // during the compilation process
}

对于 App.js ，使用了我的自定义加载程序。借助Esprima和Estraverse和Escodegen的帮助，我可以操纵源，但有时需要解决依赖关系

import {default as tt} from './transpile-time';

关于它也可以具有自己的依赖关系这一事实，在我的加载器中动态地

。在上面的示例中，

import {SomeUsefullStuff} from 'a_very_cool_lib';

应正确解决。 Webpack Loader API提供了loadModule方法，该方法提供了源代码和模块对象。从理论上讲，后者包含依赖关系及其源代码，我可以遍历它们，并用相应的源代码替换每个import语句，然后使用eval。但这很丑陋，我宁愿让Webpack来完成这项工作。例如，有一个compilation对象，似乎可以插入一些钩子，但这没有得到很好的描述。有人有主意吗？

P.S。我将全部用于模板解析和代码生成。

更新：在对Weback的内部运作方式（this article was quite helpful）进行了一次小型调查之后，我认为使用插件而不是加载器会更好。而且，也许我不需要Esprima和其他工具，因为Webpack在某个阶段还可以构建AST。但是我仍然不知道如何使用它。

Webpack，在编译过程中评估某些模块

0 个答案: