How to include swiper in gulp?

Question

gulp.js

Can't connect swiper.
If I connect via

<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'

That all works.

installed the package via npm
imported into js like this

import Swiper from 'swiper';
const swiper = new Swiper(".swiper-image-container");

gives this error


in css

@import '../../../node_modules/swiper/swiper.scss';

css worked, except for pagination. For some reason, styles are not applied to pagination.
Although if you connect via cdn then everything is ok

Answer 1

Recently, I also racked my brains, came to this decision:
1) Install npm i swiper
2) Connect it to gulp
I created separate functions for this

function vendorJS() {
  const modules = [
    'node_modules/swiper/swiper-bundle.min.js',
    'node_modules/swiper/swiper-bundle.min.js.map',
  ];

  return src(modules)
    .pipe(dest('build/js'));
};

function vendorCSS() {
  const modules = [
    'node_modules/swiper/swiper-bundle.min.css',
  ];

  return src(modules)
    .pipe(dest('build/css/pages'));
};

3) connect to the page (I use pug-m for this code is like this)

//- swiper styles
link(rel="stylesheet" type="text/css" href="./css/pages/swiper-bundle.min.css")
//- swiper js
script(src='./js/swiper-bundle.min.js')