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

Question

我正在使用 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>

第 4 步： 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並按照我的所有步驟操作，您會看到我的結果。 請幫我解決這個問題，我想使用引導程序的工具提示。

Answer 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;

Answer 2

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

require("jquery/src/jquery")