使用 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 is a library that has been developed when JS wasn't that modern. Nowadays, you might not need jQuery 了。因此，您将现代 JS 与遗留 JS 结合起来。虽然它可以工作，但如果你不需要它，请不要尝试它。

Bootstrap5不需要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
})

既然你有，我真的建议阅读你想使用的库的文档。通常他们会提供很好的示例供您使用。

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

使用 Webpack Encore 导入 Bootstrap & 插件 Carousel

Import Bootstrap & plugin Carousel with Webpack Encore

javascript

bootstrap-carousel

webpack-encore

bootstrap-5