javascript - 如何用 require.ensure (对于 webpack)替换 import 语法？

Question

我尝试用 webpack 中的 require.ensure 替换一些导入。我不完全确定我做错了什么，所以这是我的代码:

以前我有:

   import module1 from 'module1';
   import module2 from 'module2';
   import module3 from 'module3';

然后我在开关盒中使用它，如下所示:

   switch (url) {
    case 'module1':
        return module1;
    case 'module2':
        return module2;
    case 'module3':
        return module3
}

这效果很好。但是我已经删除了导入并尝试用 require.ensure 替换它们，如下所示:

  case 'module1':
        return require.ensure(['module1'], (require) => require('module1'), 'module1');
    case 'module2':
        return require.ensure(['module2'], (require) => require('module2'), 'module2');
    case 'module3':
        return require.ensure(['module3'], (require) => require('module3'), 'module3');
}

这似乎不起作用，我想我误解了 require.ensure 的工作原理。在这种情况下我该如何正确使用它？谢谢!

Answer 1

require.ensure 是异步的。如果尚未加载，它将按需加载模块。这就是为什么你必须提供回调。一旦模块加载，回调就会被执行。

您的原始示例是同步。所有模块均在执行任何代码之前加载。

为了按需加载模块，您还必须使模块 API 异步。

假设原始模块看起来像这样

import module1 from 'module1';

export default function loadModule(url) {
  switch (url) {
    case 'module1':
      return module1;
  }
}

一个简单的解决方案是让函数返回一个 promise :

export default function loadModule(url) {
  return new Promise(resolve => {
    switch (url) {
      case 'module1':
        require(['module1'], resolve);
        break;
   }
}

(我在这里使用 require 的两个参数形式而不是 require.ensure 因为它在这种情况下更容易使用)。

任何调用站点都必须更改为

const module = loadModule('module1');

至

loadModule('module1').then(module => {
  // do stuff with module
});

如果您将链中的一个函数设置为异步，则依赖于该函数的其他任何函数也必须变为异步。

<小时/>

注意:如果 url 的值已经是一个模块名称，并且您只想加载该特定模块，则根本不需要 switch 语句。直接加载模块即可:

function loadModule(url) {
  return new Promise(resolve => require(url, resolve));
}

但是您没有提供任何上下文，因此很难给出更具体的解决方案。