将 Bootstrap 4 与 Rails 6 Webpacker 一起使用时出错

Question

我有一个非常简单的带有 jquery 的 Rails 6 应用程序，配置如下：

config/webpack/environment.js：

const { environment } = require('@rails/webpacker');

const webpack = require('webpack');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery/dist/jquery.min',
    jQuery: 'jquery/dist/jquery.min',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

我正在尝试使用 Bootstrap。但是，我无法将任何 Bootstrap JS 方法与 JQuery 选择器一起使用。

例子：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

// Error: Uncaught TypeError: $(…).tooltip is not a function

任何帮助将不胜感激！ 谢谢

---

解决方案

config/webpack/environment.js：

const { environment } = require('@rails/webpacker');

const webpack = require('webpack');

environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}));

module.exports = environment;

Answer 1

(1)

您正在使用turbolinks，因此您应该依赖document:ready 而不是turbolinks:load 事件

document.addEventListener("turbolinks:load", () => {
  $("[data-toggle='tooltip']").tooltip()
})

(2)

不要使用 缩小版 javascript 库

// application.js
import "bootstrap"

// config/webpack/environment.js
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}));