javascript - 为什么在带有 Bootstrap 的 Rails 6 中使用 webpacker 时我的 js.erb View 不起作用？

Question

我试图将一些简单的 Ajax 添加到我的 Rails 应用程序中。我正在使用带有 webpack 的 Bootstrap。
我的 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

我的 javascript/packs/application.js看起来像这样

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import 'src/main'
import 'style/main'

我正在尝试为 create.js.erb 中的一个模型添加一些 Ajax

$("#question-<%= @exam_option.exam_question.id %>-options").append("<%= escape_javascript render 'exam_option', option: @exam_option %>");
$('#add_option_modal').modal('hide');

当我尝试添加我的选项之一时，我收到控制台错误
ReferenceError: Can't find variable: $
我一直在寻找解决方案，但没有成功。

我究竟做错了什么？谢谢!

编辑:

当我将 Bootstrap 添加到我的应用程序时，我遵循了 guide .遵循指南时，我使用 yarn 安装了 bootstrap、jquery 和 popper.js
yarn add bootstrap jquery popper.js
Bootstrap 使用的 jQuery 工作正常(例如工具提示)。
根据@mechnicov 的回答，我尝试更改我的environment.js至

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

我添加了require("jquery")以上import 'bootstrap'在我的application.js
当我进行这些更改时，我在 create.js.erb 中的代码工作正常，但它使我的 Bootstrap 无法正常运行并引发错误，例如 TypeError: ... $('[data-toggle="tooltip"]').tooltip() undefined .

编辑 2

根据接受的答案，我更改了我的 application.js至 :

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
window.jQuery = window.$ = require('jquery')
import 'bootstrap'
import 'src/main'
import 'style/main'

一切似乎都正常工作，但我不确定为什么我需要以这种方式添加它？ Webpack 不应该从我的 environment.js 中执行此操作吗？文件？
如果有人可以解释这一点，请这样做。

Answer 1

你可以试试下面的代码: -

# javascript/packs/application.js

window.jQuery = window.$ = require('jquery')

或

# javascript/packs/application.js

require("jquery")
window.jQuery = $;
window.$ = $;

我也面临同样的问题，但当时上面的代码对我有用

希望这对您也有帮助。 :)