Question

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

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

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

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

Answer 1

根据webpack文档。

不可能使用完全动态的import语句，例如   import（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");
    });

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

1 个答案: