Question

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

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

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

0 个答案: