为什么在 Rails 6 中使用 bootstrap 中的 webpacker 时我的 js.erb 视图不起作用？

Question

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

我正在尝试为我的模型之一添加一些 Ajaxcreate.js.erb

$("#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 添加到我的应用程序时，我遵循了本指南。按照指南进行操作时，我使用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.$ = $;

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

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