如何在浏览器中正确使用CDN加载的Swiper独立模块？

问题核心在于你引入模块的格式不匹配：你用的是UMD格式的swiper.min.js，但搭配了ES模块格式的pagination.min.mjs，普通<script>标签无法正确加载ES模块，导致全局找不到Pagination变量。

方案1：使用UMD格式的模块文件 #

Swiper的modules目录下提供了UMD格式的模块文件（后缀为.js而非.mjs），直接替换模块引入地址即可：

<script src="https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper.min.js"></script>
<!-- 改用UMD版本的pagination模块 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10.3.1/modules/pagination.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
  modules: [Pagination],
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  }
  // 其他配置...
});
</script>

方案2：全ES模块方式引入 #

如果想使用ES模块的语法，需要将脚本标签设置为type="module"，并引入Swiper的ES模块版本：

<script type="module">
// 引入ES模块版本的Swiper和Pagination
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@10.3.1/swiper.esm.browser.min.js';
import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@10.3.1/modules/pagination.esm.browser.min.js';

const swiper = new Swiper('.swiper-container', {
  modules: [Pagination],
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  }
  // 其他配置...
});
</script>

关键说明 #

• .mjs后缀的文件是ES模块，需要通过import语法加载，不能用普通<script>标签直接引入；
• Swiper针对浏览器环境提供了专门的ES模块文件（文件名含esm.browser），避免了Node.js环境的兼容问题；
• 两种方案二选一即可，前者更贴近你原本的代码结构，后者符合现代前端模块规范。

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