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

Question

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

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)

不要使用 minified javascript 库

// application.js
import "bootstrap"

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