使用 Webpack Encore 导入 Bootstrap 和插件 Carousel

Question

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

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

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

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

import 'bootstrap';

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

app.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');

app.js

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

slider.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);

Answer 1

首先：尝试了解您在做什么。虽然 Webpack 用于编译 JavaScript modules，但 jQuery 是在 JS 还没有那么现代时开发的库。如今，you might not need jQuery 了。因此，您将现代 JS 与传统 JS 结合起来。虽然它可以工作，但如果您不需要它，请不要尝试。

Bootstrap 5 不需要 jQuery。那么为什么要使用它呢？看一下来自Bootstrap's own documentation的例子：

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

既然你有similar problems before，我真的建议你阅读你想使用的库的文档。通常它们会提供你可以使用的好例子。

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