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 documentation , 应该做一些除此之外的事情，特别是脚本应该被下载、解析并作为 promise 的实现提供。

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

Answer 1

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>').appendTo('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>').appendTo('body');