在我的浏览器中没有显示带有webpack引导的Rails 6模式。

Question

我已经通过纱线命令添加了jquery，并修复了config/webpack/environment.js.中的一些部分。

什么以及如何与modal.js.erb联系？

我在application.html.erb.上测试的JQuery正在工作

environment.js

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

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

module.exports = environment

奇怪的是，按钮被应用于bootstrap5，但模式不仅起作用。

app/frontend/js/bootstrap_js_files.js

import 'bootstrap/js/src/alert'  
import 'bootstrap/js/src/button'  
import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
import 'bootstrap/js/src/modal'  
import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
import 'bootstrap/js/src/tab'  
import 'bootstrap/js/src/toast'  
import 'bootstrap/js/src/tooltip'  

views/articles/index.html.erb

<%= link_to 'Add user', new_user_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window', class: 'btn btn-primary btn-lg'}  %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
  <div class="modal-content"></div>
 </div>
</div>

views/articles/_modal.html.erb

<div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
 *Modal content comes here*
</div>
<div class="modal-footer">
 <button class="btn btn-primary">Save</button>
</div>

views/articles/modal.js.erb

$("#modal-window").find(".modal-content").html("<%= j (render 'modal') %>");
$("#modal-window").modal();

Answer 1

import '(path) ... bootstrap_js_files.js' in environment.js ?? 
where You import file with bootstraps JS ?

packs文件夹中的application.js如下所示：

import Rails from "@rails/ujs"
//import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '../js/bootstrap_js_files.js'  
import "@fortawesome/fontawesome-free/css/all"

Rails.start()
//Turbolinks.start()
ActiveStorage.start()

require('jquery')
...
...
...