如何懒加载无模块导出的立即执行函数形式的Swiper库

兄弟，我太懂你刚学JS遇到这种模块加载坑的憋屈了！你现在的核心问题是：你用import()加载的是Swiper的立即执行函数(IIFE)/UMD版本，这个版本根本不会通过ES模块导出Swiper构造函数，而是直接把Swiper挂载到全局的window对象上——所以你试图从import()返回的对象里拿Swiper，自然会报“找不到构造函数”的错！

下面给你两种靠谱的解决方案，按需选：

方案1：动态创建script标签加载（最稳妥，适配IIFE格式） #

这是加载非ES模块库的标准操作，直接模拟传统的script标签引入，加载完成后用全局的Swiper即可，还能避免重复加载：

var type = 'coverflow';

window.addEventListener("DOMContentLoaded", e => {
  // 给按钮加点击事件
  document.getElementById('swiperbtn').addEventListener('click', e => {
    // 先检查是否已经加载过Swiper，避免重复请求
    if (window.Swiper) {
      initSwiper();
      return;
    }

    // 动态创建script标签
    const swiperScript = document.createElement('script');
    swiperScript.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.js";
    
    // 加载成功后初始化Swiper
    swiperScript.onload = () => {
      console.log("Swiper-bundle.js 加载完成啦...");
      initSwiper();
    };
    
    // 加载失败的容错
    swiperScript.onerror = () => {
      console.error("哎呀，Swiper加载失败了！");
    };

    // 把script标签加到页面里开始加载
    document.head.appendChild(swiperScript);
  });
});

// 把Swiper初始化逻辑抽成单独函数，复用更方便
function initSwiper() {
  var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    pagination: {
      el: ".swiper-pagination",
    },
  });
}

方案2：继续用import()但从全局window取Swiper #

如果你就是想保留import()的写法，也可以——因为import()加载IIFE版本后，虽然返回的模块对象是空的，但Swiper已经被挂载到window上了，直接用window.Swiper就行：

var type = 'coverflow';

window.addEventListener("DOMContentLoaded", e => {
  document.getElementById('swiperbtn').addEventListener('click', async (e) => {
    // 加载Swiper的IIFE版本，返回的对象是空的，但Swiper已经挂到window了
    await import("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.js");
    console.log("Swiper-bundle.js 加载完成...");
    
    // 直接从全局window上取Swiper构造函数
    var swiper = new window.Swiper(".mySwiper", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  });
});

补个小知识点：为啥原来的代码会报错？ #

Swiper的CDN包有好几种格式：

• swiper-bundle.js：是IIFE/UMD格式，浏览器加载后直接把Swiper挂到window
• swiper-bundle.esm.browser.min.js：是ES模块格式，这个版本才会用export { Swiper }导出构造函数，这时候你才能用import { Swiper } from '...'的方式获取（不过要注意CDN的CORS设置，一般都没问题）

你之前选的是IIFE版本，所以用ES模块的import()语法去拿导出值，肯定拿不到啦~

备注：内容来源于stack exchange，提问作者latvian