无前端构建系统项目如何引用SwiperJS独立非打包版本及所需插件

报错原因 #

你遇到的路径报错是因为Swiper的ESM包内部依赖ssr-window、dom7两个第三方依赖，使用了无路径前缀的裸模块导入语法，而浏览器原生ES模块规范要求所有导入路径必须以/、./、../开头，无法直接识别裸模块名称。

方案1：使用浏览器原生Import Map（推荐，仅支持现代浏览器） #

Import Map是浏览器原生提供的模块映射能力，无需构建工具即可解决裸模块导入问题。

• 第一步：整理依赖资源目录
  除了Swiper本身的ESM包，还需要下载ssr-window、dom7两个依赖的ESM版本，最终目录结构参考：

  /scripts
    /vendor
      /swiper
        swiper.esm.js
        swiper.min.css
        /modules
          navigation.esm.js
          pagination.esm.js
          navigation.min.css
          pagination.min.css
      /ssr-window
        ssr-window.esm.js
      /dom7
        dom7.esm.js
  

• 第二步：在HTML头部添加Import Map配置，注意必须放在所有type="module"的script标签之前：

  <script type="importmap">
  {
    "imports": {
      "ssr-window": "/scripts/vendor/ssr-window/ssr-window.esm.js",
      "dom7": "/scripts/vendor/dom7/dom7.esm.js",
      "swiper/": "/scripts/vendor/swiper/"
    }
  }
  </script>
  

• 第三步：按需引入CSS资源：

  <link rel="stylesheet" href="/scripts/vendor/swiper/swiper.min.css">
  <link rel="stylesheet" href="/scripts/vendor/swiper/modules/navigation.min.css">
  <link rel="stylesheet" href="/scripts/vendor/swiper/modules/pagination.min.css">
  

• 第四步：导入模块并初始化Swiper：

  <script type="module">
    import Swiper from '/scripts/vendor/swiper/swiper.esm.js'
    import { Navigation, Pagination } from '/scripts/vendor/swiper/modules/navigation.esm.js'
  
    // 注册插件
    Swiper.use([Navigation, Pagination])
  
    // 初始化实例
    new Swiper('.swiper', {
      modules: [Navigation, Pagination],
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
      }
    })
  </script>
  

方案2：使用UMD格式按需引入（兼容旧浏览器） #

如果需要兼容不支持Import Map的旧版本浏览器，可以直接使用Swiper提供的UMD格式独立包，无需ES模块支持：

• 第一步：下载Swiper核心、导航、分页对应的UMD格式JS包和对应CSS，存入项目vendor目录
• 第二步：按顺序引入资源：

  <link rel="stylesheet" href="/scripts/vendor/swiper/swiper.min.css">
  <link rel="stylesheet" href="/scripts/vendor/swiper/modules/navigation.min.css">
  <link rel="stylesheet" href="/scripts/vendor/swiper/modules/pagination.min.css">
  
  <script src="/scripts/vendor/swiper/swiper.min.js"></script>
  <script src="/scripts/vendor/swiper/modules/navigation.min.js"></script>
  <script src="/scripts/vendor/swiper/modules/pagination.min.js"></script>
  

• 第三步：初始化Swiper：

  <script>
    new Swiper('.swiper', {
      modules: [SwiperNavigation, SwiperPagination],
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
      }
    })
  </script>
  

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