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

【问题标题】：react dynamic import using a variable doesn't work使用变量反应动态导入不起作用
【发布时间】：2020-02-09 11:53:19
【问题描述】：

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

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

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

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

【问题讨论】：

您使用 CRA 还是您的自定义 webpack 配置？对我来说似乎很好，它应该可以工作。根据您发布的代码，它的 JS 似乎与 React 没有任何关系。
我使用 webpack-dev-server 通过 react-scripts 从 create-react-app utils 开始

标签： javascript reactjs dynamic-import

【解决方案1】：

根据 webpack 文档。

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

import() 必须至少包含一些关于模块所在的位置。

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

所以下面的 sn-p 工作

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

下面的 sn-p 不起作用

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");
    });

【讨论】：

谢谢@nithin。我永远不会考虑嵌入变量。
将变量嵌入字符串文字对我不起作用。还有什么需要我注意的吗？
对我来说也是如此，即使我嵌入了变量它也不起作用。我正在使用 React 框架。
"lazy recursive"从何而来，为何与本次讨论有关？