当我使用 webpack 并将其导入 app js 时，swiper 滑块不起作用

Question

当我使用 webpack 并为入门 webpack 创建应用程序 js 时，我将 swiper 滑块用于我网站中的滑块 不再可以读取 swiper.js 我的配置 webpack

const webpack = require('webpack');
module.exports = {
mode:"development",
context: __dirname,
entry: {
    vendor: [
        './node_modules/jquery/dist/jquery.js',
    ],
    shopApps: "./apps/shop/shopApp.js",

},
module: {
    rules: [
        {
            test : /\.jsx?$/,
            loader: 'babel-loader',
            // exclude: ['/node_modules/','/assets/sass','/assets/plugins/'],

        },
        {
            test: /\.(html)$/,
            loader: 'html-loader',
            exclude: '/node_modules/'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            exclude: ['/node_modules/',__dirname+'/assets/plugins/'],
        },
        {
            test: /jquery.+\.js$/,
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        },
        {
            test: /\.(scss)$/,
            use: [
                {
                    // Adds CSS to the DOM by injecting a `<style>` tag
                    loader: 'style-loader'
                },
                {
                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
                    loader: 'css-loader'
                },
                {
                    // Loader for webpack to process CSS with PostCSS
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                },
                {
                    // Loads a SASS/SCSS file and compiles it to CSS
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},
output: {
    path: __dirname + '/webpack',
    filename: "[name].js"
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
],
externals: {
    jquery: 'jQuery',
}

};

和我的 shopApps，其中我有 angular 应用程序，我调用 js 文件

require('./assets/css/style.css');
require('./assets/sass/app.scss') ;
import 'jquery';
import 'popper.js'
import 'bootstrap-material-design';
import 'moment';
import 'jalali-moment';
import 'swiper';
import 'underscore';
import angular from 'angular';
import ngRoute from 'angular-route';
import localStorage from 'angular-local-storage';
import moment from 'angular-moment';
const shopApps = angular.module('shopApp', [ngRoute,localStorage,moment]);
//router
require('./routerShopping')(shopApps);
require('./shopService')(shopApps);
require('./layout/headerFooter/header/webpackHeaderReq')(shopApps);
require('./homePage/webpackReqHome')(shopApps);
require('./assets/plugins/webpackReqPlugin')(shopApps);

和我的 html 文件，其中我为 swiper 和 html 代码编写脚本标签

<div class="bg-gray-light">
<div class="card bg-transparent">
    <div class="card-header text-center border-bottom-0">
        <h1 class="">
        are you have pet ?
        </h1>
        <h3>
            are you want pet
        </h3>
    </div>
    <div class="card-body text-center">
        <div class="swiper-container chosePet">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-18.png" alt="Dog">
                    </a>

                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-17.png" alt="Cat">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-15.png" alt="bird">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-16.png" alt="rabbit">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-19.png" alt="reptile">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  (function () {
    "use strict";
      import Swiper from  'swiper/dist/js/swiper';
        var bannerSlider = new Swiper('.chosePet', {
            slidesPerView: 1,
            fadeEffect: {
           crossFade: true
         },
          effect: 'fade',
          allowTouchMove: false,
          autoplay: {
              delay: 1000,
              disableOnInteraction: false,
              reverseDirection:true
          },
      })
    })();
</script>

当我捆绑文件并启动 http 服务器时出现错误

参考错误：未定义 Swiper

谢谢你帮助我

Answer 1

这种方法解决了我的问题，根据文档，我这样做了，它对我帮助很大。

导入 Swiper 和模块。

我想使用coverflow效果，我自己添加了它，如果你愿意，你也可以添加不同的效果。

import {
    Swiper,
    Navigation,
    Pagination,
    Scrollbar,
    EffectCoverflow
} from 'swiper/dist/js/swiper.esm.js';

安装模块

然后我初始化 swiper

Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);

现在您可以使用 Swiper

var swiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false
    }
});

您还可以在此链接的自定义构建部分阅读更多相关信息

https://idangero.us/swiper/api/#custom-build