在Laravel 5.7 / Bootstrap 4.3中加载和使用Swiper 4.4.6

Question

我试图找到基于Laravel 5.7网站在bootstrap 4中使用Swiper的最佳方法。

在安装Swiper与npm install swiper。

在app.js我有：

require('./bootstrap');
require('swiper');
require('./custom');

bootstrap和custom在资源/ js中就像app.js. Swiper安装在/ node_modules中。

在custom.js中

var ProjectSwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
})

使用npm run watch正确加载和编译所有上述文件，此处没有错误。

尽管如此，当浏览器控制台显示ReferenceError: Swiper is not defined时，swiper仍无法正常工作

我在这里错过了什么？

Answer 1

尝试像这样加载Swiper：

var Swiper = require('swiper'); 

或作为ES模块：

import Swiper from 'swiper';

您还可以决定在bootstrap.js中加载它，其他库也被加载：

window.Swiper = require('swiper');

Answer 2

window.Swiper = require('swiper').default;

这段代码可行。