如何通过ES2015动态import()加载CDN托管的JavaScript库（如jQuery）？

这问题我之前踩过坑！你用动态import()加载传统CDN库没生效，核心原因是这类库（比如你用的jQuery slim版）是为全局变量设计的，不是ES模块，而动态import()默认会把加载的资源当作ES模块解析，这就产生了冲突。

为什么你的代码没起作用？ #

• 浏览器虽然下载了脚本，但因为把它当作ES模块处理，不会把库的全局变量（比如$、jQuery）映射到模块的导出对象里，所以你在then里拿到的其实是个空对象，自然没法访问到jQuery。
• 你遇到的“模糊错误”，大概率是模块解析时找不到预期的导出项导致的。

三种可行的解决方案 #

方法一：直接访问全局变量（最快解决） #

既然脚本已经加载到全局环境了，你可以在then回调里直接用window.jQuery或window.$来访问：

import('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js')
  .then(() => {
    console.log('jQuery已加载:', window.jQuery);
    // 这里就能正常使用jQuery了
    $('body').css('background-color', '#f0f0f0');
  })
  .catch(console.error);

⚠️ 注意：这种方式依赖库本身会声明全局变量，不是所有库都这么做，而且不符合现代模块规范，适合快速临时解决问题。

方法二：加载ES模块版本的库 #

很多主流库现在都提供了ES模块版本，你可以找对应的CDN链接。比如jQuery的ES模块版可以用unpkg这样的CDN自动适配：

import('https://unpkg.com/jquery@3.4.1/dist/jquery.slim.esm.js')
  .then((module) => {
    const jQuery = module.default;
    console.log('jQuery作为模块加载完成:', jQuery);
    // 直接用导出的对象操作
    jQuery('body').css('font-size', '16px');
  })
  .catch(console.error);

这种方式完全符合ES模块规范，不需要依赖全局变量，是新项目的推荐方案。

方法三：手动注入script标签（兼容性最好） #

如果找不到ES模块版本，也可以回到传统的脚本注入方式，通过创建<script>标签来加载，并监听加载事件：

function loadExternalScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve(window.jQuery);
    script.onerror = (err) => reject(err);
    document.head.appendChild(script);
  });
}

loadExternalScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js')
  .then((jQuery) => {
    console.log('通过script标签加载完成:', jQuery);
    $('button').click(() => alert('jQuery works!'));
  })
  .catch(console.error);

这种方式兼容性拉满，适合老项目或者需要兼容低版本浏览器的场景。

补充说明 #

你参照MDN的示例没生效，是因为MDN的示例用的是专门的ES模块资源，而你选的jQuery是UMD/全局变量格式的，两者的加载逻辑完全不同。下次用动态import()前，可以先确认CDN资源是否支持ES模块（比如看库的文档或CDN页面的说明）。

内容的提问来源于stack exchange，提问作者Brian M. Hunt