1

我一直在尝试使用 import() 函数来导入运行时动态的东西。我认为只要我为文件创建一个条目,webpack 就可以足够聪明地 import() 正确的模块,但似乎并非如此。

有谁知道一种方法来分块一个条目并使用 import() 语法,给它一个变量,并让它在运行时工作?

根问题的一个简单示例如下:

// works
import( './a.js' ).then(() => console.log('it worked'));

// something is a dynamic variable that changes at runtime
const something = './a.js';
// does not work, even with this simplistic example
import( something ).catch(() => console.log('it did not work'));
4

2 回答 2

5

它不起作用,因为虽然它被称为“动态导入”,但它并不符合这个词的含义。“动态”导入的想法是能够在运行时动态导入某些东西,但这里需要注意的是:必须知道要导入的模块。

由于 webpack 会进行静态分析以对这些import()语句进行延迟加载,因此一切都必须是已知且可预测的,否则 webpack 将无法动态创建异步块。这就是为什么将变量添加到导入不起作用的原因。

于 2018-11-08T11:58:27.383 回答
0

是的,这个 webpack 有点奇怪。真正的动态导入不起作用。我们可以将字符串模板放在 import 语句中,但放置变量名会引发依赖警告。

这是我能实现的最接近的 - 放置 if 条件或 switch case 或字符串模板,然后将导入写入其中。

就像是 -

const getModule = (filename) => {return import(`directoryPath/${fileName}`);}

或者

const something = 'a.js';

if (something === 'a.js') {
  return import(`./${something}`); // promise
} else if (something === 'b.js'){
  .........
}

动态导入有这个东西 - webpack 在这些条件下捆绑所有可能的文件,这并不酷。

于 2021-02-01T08:22:43.853 回答