Блог

Я работаю над проектом, в котором нет интерфейсной системы сборки-только HTML — шаблоны, ссылающиеся на модули ES6 для необходимых функций JavaScript. Я бы хотел интегрировать SwiperJS. Я вижу в документации ссылку на файлы CSS и JS, которые передаются через CDN, но они ссылаются на полную версию в комплекте, которая довольно велика по размеру файла. Мне нужны только основные функциональные возможности, плагины навигации и разбиения на страницы, ничего больше, но я изо всех сил пытаюсь понять, как ссылаться на них независимо в такого рода проектах (в отличие от полностью структурированного проекта типа Vue/React). Я попытался загрузить все ресурсы в отдельный проект и скопировать их в свой рабочий проект в том месте, где они мне нужны ( /scripts/vendor/swiperjs/ ), но когда я пытаюсь загрузить модуль на свою HTML-страницу, как это:

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

…это приводит к ошибке в консоли браузера, связанной с неправильными путями к каталогам (он запускается через локальный веб-сервер):

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

Кажется неправильным рыться в файлах swiper и изменять все пути к каталогам, так что я, должно быть, делаю что-то не так. Возможно, я что-то упустил, и весь этот подход не будет работать без чего-то вроде Webpack.

Может ли кто-нибудь, пожалуйста, посоветовать, как ссылаться только на основной модуль swiperjs, а также на плагины навигации и разбиения на страницы в такого рода проектах, пожалуйста?

В другом месте документации речь идет об этом: https://swiperjs.com/swiper-api#using-build-script. Это случай загрузки репозитория и создания пользовательского пакета. Затем вместо ссылки swiper.esm.js вам нужно указать ссылку swiper-bundle.esm.browser.min.js , так как эта версия, по-видимому, будет работать независимо в браузере.