如何引用 'stand-alone'，SwiperJS 的非捆绑版本

Question

我正在开发一个没有前端构建系统的项目 - 只有 HTML 模板引用 ES6 模块以获得 JavaScript 功能的必要位。我想集成 SwiperJS. I can see on the documentation link 到 CSS 和通过 CDN 提供的 JS 文件，但它们引用了完整的捆绑版本，该版本的文件大小相当大。我只需要核心功能以及导航和分页插件，没有别的，但我正在努力寻找如何在此类项目中独立引用这些（而不是完全框架化 Vue/React种项目）。我已经尝试将所有资产下载到一个单独的项目中，并将它们复制到我的工作项目中，在我想要它们的位置 (/scripts/vendor/swiperjs/) 但是当我尝试在我的 HTML 像这样的页面：

<script type="module">
  import Swiper from '/scripts/vendor/swiper/swiper.esm.js'
</script>

…它在浏览器控制台中给出与目录路径不正确相关的错误（通过本地 Web 服务器是运行）：

Uncaught TypeError: Failed to resolve module specifier "ssr-window". Relative references must start with either "/", "./", or "../".

不得不浏览 swiper 文件并更改所有目录路径感觉不对，所以我一定是做错了什么。可能是我遗漏了一些东西，如果没有像 Webpack 这样的东西，整个方法将无法工作。

请问在这种项目中如何只引用核心swiperjs模块和导航分页插件？

Answer 1

文档中的其他地方对此进行了处理：https://swiperjs.com/swiper-api#using-build-script。这是下载存储库并创建自定义包的情况。然后，您需要引用 swiper-bundle.esm.browser.min.js 而不是引用 swiper.esm.js，因为该版本似乎将运行在浏览器中独立。

如何引用 'stand-alone'，SwiperJS 的非捆绑版本

How to reference 'stand-alone', non-bundled version of SwiperJS

swiperjs

swiper.js