3

我正在尝试创建一个库，该库公开一个函数，该函数根据传递的参数动态导入其他库。就像是：

export function foo(deps){
  deps.forEach(dep => import(dep).then(doSomething))
}
//usage:
foo(['bar', 'baz']);

库不应该提前知道 deps，但是使用它的应用程序肯定会并且会导入 foo 和任何 deps。

当我尝试创建这样的东西时，我收到一条错误消息“找不到模块栏”。我知道 webpack 使用静态分析来捆绑动态导入，但我知道它可以在导入中有变量。

如果有办法提前列出依赖关系，那很好。我尝试过这样的事情（来自我使用 foo 的应用程序）

function doNotRun(){
   import('bar');
   import('baz');
}
foo(['bar', 'baz'])

希望 webpack 在运行时发现它已经捆绑了这个模块，但它似乎与模块 ID 不匹配。我看到 bar 和 baz 捆绑成块，但实际导入使用不同的模块 ID。

我还尝试让 foo 了解所有可能的 deps（按名称，但不导入它们），但它失败了，因为它需要在构建时了解它们。像这样：

function getImportPromise(subapp){
  switch(subapp){
    case 'baz':
      return import('baz');
    case 'bar':
      return import('bar');
    default:
      return Promise.reject(dep + ' is not known');
  }
}

export function foo(deps){
  deps.forEach(dep => getImportPromise(dep).then(doSomething))
}

有可能做我要求的吗？

编辑：我刚刚意识到像我最后一个想法这样的东西可以奏效，只是感觉很奇怪。更一般地说，我认为 import() 可以接受变量。

export function foo(deps, getImportPromise){
  deps.forEach(dep => getImportPromise(dep).then(doSomething))
}

//usage
function getImportPromise(subapp){
  switch(subapp){
    case 'baz':
      return import('baz');
    case 'bar':
      return import('bar');
    default:
      return Promise.reject(dep + ' is not known');
  }
}
foo(['bar', 'baz'], getImportPromise);

如果这是推荐的解决方案，那还不错。我只是希望有一种方法可以让 foo 自己进行导入。

4

0 回答 0