Динамически ES2015 import () внешний модуль (пример из Chrome 75 DevTools) - PullRequest
Новая
       36

Динамически ES2015 import () внешний модуль (пример из Chrome 75 DevTools)

1 голос
/ 29 июня 2019

Есть ли способ использовать динамический импорт для загрузки в браузер библиотек Javascript, доступных через CDN, например jQuery, например ::1001* 

> import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js')
   .then(console.log)
   .catch(console.error)

Вместо того, чтобы сделать jQuery доступным, вышеприведенное приводит к довольно непонятным:

Module {Symbol(Symbol.toStringTag)}

Похоже, что этот абсурдно простой пример, в сущности следующий за документацией MDN , должен делать что-то иное, и, в частности, скрипт должен быть загружен, проанализирован и доступен как исполнение обещания .

Панель «Сеть» DevTools указывает, что сам файл был загружен правильно, с типом контента content-type: application/javascript, однако нет никаких признаков того, что контент был интерпретирован, и если он стал доступным, не очевидно, как получить доступ к нему.

1 Ответ

1 голос
/ 29 июня 2019

import() возвращает Promise со всеми соображениями, которые влечет за собой Promise. В этом случае jQuery будет доступен глобально благодаря тому, как jQuery инициализирует себя, но не раньше, чем разрешится Promise. Имейте в виду, что пока Promise ожидает разрешения, код в другом месте может быть запущен бесплатно, но jQuery может быть еще не доступен.

Например: 

import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js')
  .then(() => {
    jQuery('<div>Hello, World!</div>').appendTo('body');
  });

Или: 

(async () => {
  await import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js');
  jQuery('<div>Hello, World!</div>').appendTo('body');
})();

Но это проблематично: 

<script>
  (async () => {
    await import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js');
    jQuery('<div>Hello, World!</div>').appendTo('body');
  })();
</script>

<script>
  // jQuery usually won't be available here, so we get an exception
  jQuery('<div>First?</div>').append('body');
</script>

И это тоже может быть проблемой: 

import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js')
  .then(() => {
    jQuery('<div>Hello, World!</div>').appendTo('body');
  });
// No jQuery here, import hasn't resolved
jQuery('<div>First?</div>').append('body');
...