Rails 6.0.3.2 yarn add bootstrap jquery popper.js 不工作，不能使用引导工具提示答案

【问题标题】：Rails 6.0.3.2 yarn add bootstrap jquery popper.js is not working and cannot use bootstrap tooltipRails 6.0.3.2 yarn add bootstrap jquery popper.js 不工作，不能使用引导工具提示
【发布时间】：2020-11-07 12:27:44
【问题描述】：

我正在使用 rails 6 版本6.0.3.2

这是我设置引导程序 4 的所有步骤：

第 1 步：rails new test_tooltip

第 2 步：rails g controller welcome index

第 3 步：在welcome/index.html.erb 中

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<script>
$( document ).on('turbolinks:load', function() {
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

第四步：yarn add bootstrap jquery popper.js

info All dependencies
├─ bootstrap@4.5.0
├─ jquery@3.5.1
└─ popper.js@1.16.1

第 5 步：配置\webpack\environment.js

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

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery', //  $: 'jquery', does not work!
    jQuery: 'jquery/src/jquery', // jQuery: 'jquery', does not work!
    Popper: ['popper.js', 'default']
  })
)
module.exports = environment

第 6 步：app\javascript\packs\application.js

import "bootstrap"

第 7 步：app\assets\stylesheets\application.scss

@import "bootstrap/scss/bootstrap";

当我访问欢迎/索引页面时，虽然引导 css 警报有效，但工具提示不起作用，我在控制台中收到此错误：

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

您可以尝试安装 rails 6 版本 6.0.3.2 并按照我的所有步骤操作，您将看到我的结果。请帮我解决这个问题，我想使用引导工具提示。

【问题讨论】：

看来这是正确的解决方案：stackoverflow.com/a/60494611/13941960

标签： jquery ruby-on-rails twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

在我的例子中，我们使用的是 popperjs/core，所以最终得到了这个 webpack 配置：

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');
const webpack = require('webpack');

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    cash: "cash-dom",
    Popper: ['@popperjs/core']
  })
);
module.exports = environment;

【讨论】：

【解决方案2】：

只需将其添加到您的 application.js

require("jquery/src/jquery")

【讨论】：