Javascript 如何为webpack 2 import（）语句使用动态名称？

我试图创建一个库，该库公开一个函数，该函数根据传递的参数动态导入其他库。比如：

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

库不应该事先知道DEP，但使用它的应用程序肯定会并且会导入foo和任何DEP

当我尝试创建类似的内容时，会出现一个错误，显示“未找到模块栏”。我知道webpack使用静态分析捆绑动态导入，但我知道它可以在导入中包含变量

如果有办法提前列出依赖项，那就好了。我尝试了类似的东西（从我使用foo的应用程序）

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

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

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自己进行导入。

您正在寻找

Promise.all（deps.map（dep=>import（dep））吗

？这应该行得通。话虽如此，您的第一个解决方案也应该行得通。如果不行，那听起来像是网页包错误。嗯，我不确定。问题是网页包的静态分析似乎无法检测到bar和baz将被导入（），因此无法为它们创建单独的块（甚至可以将它们捆绑起来）

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