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

Question

当我使用 webpack 时，我在我的网站上使用 swiper slider 作为滑块并为入口 webpack 创建应用程序 js 不再可以读取 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 服务器时出现错误

ReferenceError: Swiper is not defined

谢谢你的帮助

Answer 1

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

导入 Swiper 和模块。

我想用coverflow效果，自己加的，你也可以加不同的效果。

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

安装模块

然后我初始化刷卡器

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
    }
});

您还可以在此 link

的 自定义构建 部分阅读更多相关信息

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

Answer 2

根据 Webpack 的 docs，您可以将 Swiper 作为 CommonJS 模块导入，如下所示：

var Swiper = require('swiper');

或者如果您需要 ES 模块，那么：

import Swiper from 'swiper';

Answer 3

按如下方式导入，以便分页、滚动条和模块正常工作：

import Swiper from '../../../node_modules/swiper/swiper-bundle.js'
import '../../../node_modules/swiper/swiper-bundle.min.css'

然后初始化：

return new Swiper('.swiper', {
        slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: false,
        },
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        // Responsive breakpoints
      })
  // Here we define a variable that returns the swiper
  const carousel = carouselProperties()
  // Afte we define this variable we can finally call the init function
  carousel.init()

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

swiper slider not work when i user webpack and import this in app js

javascript

angularjs

swiper

webpack

导入 Swiper 和模块。

安装模块

现在您可以使用 Swiper