将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']
}));