使用变量反应动态导入不起作用

Question

使用React，谁能解释为什么当我们使用变量时动态导入失败？

// Do not work
let module = "./DynamicComponent";
import(module).then(ModuleLoaded => {})

// Works
import("./DynamicComponent").then(ModuleLoaded => {})

我试图刷新浏览器缓存，但没有任何变化。

Answer 1

根据webpack文档。

不能

使用完全动态的导入语句，例如 进口(foo(。因为 foo 可能是任何文件的任何路径 您的系统或项目。

import(( 必须至少包含一些关于 模块位于。

https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import。

所以下面的片段有效

import("./components/About").then(component => {
console.log(component, "loaded successfully");
});

下面的代码片段不起作用

let a = "./components/About";
import(a).then(component => {
console.log(component, "loaded successfully");
});

我在任何地方都找不到说明确切原因的解释，为什么上面的代码有效。但我的直觉是 webpack 不知道变量a的数据类型(它必须是一个字符串(，因此无法在动态导入中使用它。

上面的代码被转译为

let a = "./components/About";
__webpack_require__("./src lazy recursive")(a).then(component => {
console.log(component, "loaded successfully");
});

下面的代码实际上有效(将变量嵌入字符串文字中(。

let a = "./components/About";
import(`${a}`).then(component => {
console.log(component, "loaded successfully");
});

这被翻译成

let a = "./components/About";
__webpack_require__("./src lazy recursive ^.*$")("".concat(a)).then(component => {
console.log(component, "loaded successfully");
});