javascript - 动态 ES2015 import() 外部模块（来自 Chrome 75 DevTools 的示例）

Question

有没有办法使用动态导入加载到通过 CDN 提供的浏览器 Javascript 库，例如 jQuery，例如：

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

上面的代码并没有使 jQuery 可用，而是产生了相当晦涩的：

感觉就像这个荒谬的简单示例，基本上遵循MDN 文档，应该做除此之外的其他事情，特别是应该下载、解析并提供脚本以履行承诺。

的网络面板DevTools指示文件本身已正确下载，内容类型为content-type: application/javascript，但没有迹象表明内容已被解释，并且如果它可用，则不清楚如何访问它。

Answer 1

import()返回 a以及 a 所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');