реагировать на динамический импорт с помощью переменной не работает - PullRequest
Новая
       37

реагировать на динамический импорт с помощью переменной не работает

0 голосов
/ 12 октября 2019

С React, кто-нибудь может объяснить мне, почему динамический импорт завершается неудачно, когда мы используем переменную? 

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

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

Я пытался обновить кеш браузера, но ничего не изменилось.

1 Ответ

2 голосов
/ 12 октября 2019

Согласно документации веб-пакета.

Невозможно использовать полностью динамический оператор импорта, такой как 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");
    });
...