时间戳

首页 > 解决方案 > 使用 Webpack Encore 导入 Bootstrap 和插件 Carousel

javascript - 使用 Webpack Encore 导入 Bootstrap 和插件 Carousel

问题描述

我正在使用 Webpack Encore 开发 Symfony 项目，但在加载 Bootstrap 和插件 Carousel 时遇到问题。

它可能来自 Bootstrap 的导入，因为当我导入文件时它似乎工作（但不完全）：

import './styles/bootstrap.min.css';

但是当我从“node_modules”正确导入包时，滑块根本不起作用：

import 'bootstrap';

并且控制台中没有错误。这是我的代码：

应用程序.css

@import '~bootstrap';
@import url('https://maps.googleapis.com/maps/api/js?language=en');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

应用程序.js

//import './styles/bootstrap.min.css';
import 'bootstrap';

滑块.js

import jQuery from 'jquery';

// make Carousel a jQuery plugin
import Carousel from 'bootstrap/js/dist/carousel';
import jQueryBridget from 'jquery-bridget';
jQueryBridget('carousel', Carousel, jQuery);

;(function ($, window, document, undefined) {
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 10000
        });
    });
})(jQuery, window, document);

标签： javascriptbootstrap-5webpack-encorebootstrap-carousel

解决方案

第一：试着理解你在做什么。虽然 Webpack 用于编译JavaScript 模块，但 jQuery 是在 JS 还没有那么现代时开发的库。如今，您可能不再需要 jQuery。因此，您将现代 JS 与传统 JS 结合起来。虽然它可以工作，但如果您不需要它，请不要尝试。

Bootstrap 5 不需要 jQuery。那么为什么要使用它呢？看一下Bootstrap 自己的文档中的示例：

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

所以这应该足够了：

var myCarousel = document.querySelector('.carousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 1000
})

由于您之前遇到过类似的问题，我真的建议您阅读您要使用的库的文档。通常，它们会提供您可以使用的好例子。

TL;DR：停止使用 jQuery 并开始阅读文档。

推荐阅读