如何检测页面中SwiperJS等库是否可用，避免初始化时报未定义错误

解决方法 #

你只需在执行初始化代码前，先判断对应库的全局变量是否存在即可，有两种常用实现方式：

1. 兼容所有环境的基础判断写法 #

用typeof操作符检测构造函数是否存在，该操作符检测未声明的变量时不会抛出错误，完全适配你的场景：

// Swiper 初始化逻辑改造
if (typeof Swiper === 'function') {
    var swiper = new Swiper(".slider-1", {
        loop: true,
    });
}

// GLightbox 初始化逻辑改造
if (typeof GLightbox === 'function') {
    // 此处替换为你原本的GLightbox初始化代码即可
    const lightbox = GLightbox({
        selector: '.glightbox'
    });
}

2. 现代JS简洁写法 #

如果你的项目兼容ES2020及以上语法，可以用更短的逻辑短路写法：

// Swiper 初始化
window.Swiper && new Swiper(".slider-1", {
    loop: true
});

// GLightbox 初始化
window.GLightbox && GLightbox({
    selector: '.glightbox'
});

逻辑说明：直接从全局window对象上读取库对应的属性，未加载库时属性值为undefined，逻辑与（&&）会触发短路，直接中断后续初始化代码的执行，不会报错。

两种方案均可以完美解决非对应页面的报错问题，你可以根据项目的兼容要求选择即可。

内容的提问来源于stack exchange，提问作者Vinith Almeida