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

Question

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

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

上面的代码并没有使 jQuery 可用，而是产生了相当模糊的结果：

感觉这个荒谬的简单示例，基本上遵循 MDN documentation，应该做一些不同于此的事情，特别是脚本应该被下载、解析并作为承诺的实现提供。

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

Answer 1

import() returns 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');

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

Dynamically ES2015 import() external module (example from Chrome 75 DevTools)

javascript

browser

ecmascript-6

javascript-import