尝试从头开始构建新的 Rails 6 应用程序来替换 Rails 5.2 应用程序。尝试将 webpacker 与基础站点 jquery 和 Coffeescript 一起使用
经过一番搜索后，我已经用 webpacker 加载了所有内容。它看起来非常（也许太）灵活，因为示例使用了不同的方法。
一切正常（基金会执行 x-grid、标注等，jquery 加载，我可以记录 jquery 对象，coffeescript 编译），除了 jquery 事件似乎没有触发或构建侦听器。
应用程序/javascript/pack/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
import "foundation-sites"
require("../src/application")
require("../src/coffee/application.coffee")
$(document).on('turbolinks:load', function() {
$(document).foundation()
});
应用程序/javascript/src/application.scss
@import './foundation/foundation.scss';
配置/webpack/environment.js
const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
environment.loaders.prepend('coffee', coffee)
module.exports = environment
根index.slim测试页
.grid-container
.grid-x.grid-margin-x
.small-4.cell
h1 Home#index
p Find me in app/views/home/index.html.slim
.small-4.cell
p and something over here?
.small-4.cell
p and more over here?
.callout.alert
| and maybe an alert
.callout.notice
button#test_button.button I be a button
应用程序/javascript/src/coffee/application.coffee
import './hello_coffee.coffee';
import './test_button.coffee';
应用程序/javascript/src/coffee/test_button.coffee
console.log "looking for a button"
jQuery ->
console.log $('#test_button')
$('#test_button').on 'click', (e) ->
alert "I see you be a button"
console.log "should only see if test button clicked"
加载根测试索引页面。
它在 jQuery 函数之前记录“寻找按钮”
它记录 #test_button jquery 对象
测试按钮不响应单击。警报或其他控制台消息不会出现。
我想我只是尝试了一次点击，但没有任何反应
正如你所知，我不喜欢大括号、html 标签等（slim 和咖啡），我有很多咖啡脚本，现在真的不想改变。
不太擅长使用 Web 检查器进行调试（Safari），但东西就在那里，只是不能或不知道如何找到侦听器
知道我错过了什么事件没有加载/触发吗？
附加信息：
我已经放弃了。 Webpacker 对待无障碍 javascript 的方式似乎与资产管道不同。我几乎所有的 javascript (coffescript) 都是 UJS。 （是否有 DOM 元素、类、行为等）加载，然后添加一个侦听器来处理它是否被单击、更改等。
我没有做正确的事情，我浪费了更多的时间试图用应该更好的东西来替换一些可以工作的东西。我必须等到更多的人感到困惑并且其他人指出不同之处。 Webpacker 更适合单页 JS 应用程序，但我不会这样做。
我尝试过从等式中剔除不同的东西。使用 DOM 事件而不是 jQuery。删除基础等。js 控制台上没有错误。我什至找到了哪里可以查看监听器的位置，而我的监听器也在那里，它只是不响应点击。也许是因为这只是开发模式下的一个新的 shell 应用程序。
EDIT
我发现了问题，但没有解决！
我从头开始开发了一个新应用程序，但一步一步地添加了我的要求（coffeescript、基础站点（取决于 jQuery））。
我创建了带有三个“单击”按钮的主页。纯 javascript、coffeescript 和 jquery 各一个。还有另一个按钮可以使用rails.ujs 重新加载页面
.grid-container
.grid-x.grid-margin-x
.small-4.cell
p Left column: Find me in app/views/home/index.html.slim
.small-4.cell
p Middle column: and something over here?
.small-4.cell
p Right column: and and more over here?
.callout.alert
p#jsbutton.button Javascript Button
.callout.warning
p#csbutton.button Coffeescript Button
.callout.success#jqbutton
p#jqbutton.button Jquery Button
p= link_to "Reload",root_path, data: { confirm: 'Reload: Are you sure?' }, class: :button
然后，我一次向包中添加一个处理程序来处理每个按钮。 javascript 点击处理程序开箱即用（在添加 Coffeescript 和 jquery 之前）。添加了咖啡脚本加载器和按钮工作。添加了jquery并且所有按钮都工作了。 home slim 文件是为基础网格设置的，但是基础没有加载，所以它只是 div 和 p 的
然后我使用yarn安装了foundation-sites并设置了pack/application.js文件，如下所示：
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./js/jsbutton.js")
require("./coffee/hello_coffee.coffee")
require("./coffee/csbutton.coffee")
require("./jquery/jqbutton.coffee")
import "foundation-sites"
import './scss/foundation.scss';
$(document).on('turbolinks:load', function() {
$(document).foundation()
})
基础网格尽显其魅力，但没有一个按钮响应点击。它们都有点击事件处理程序。重新加载按钮（rails.js）确实响应了一条确认消息。
我想我应该去基金会站点寻求帮助，问题是基金会站点可能是dying!!! https://github.com/foundation/foundation-sites/issues/11767
希望它能回到正轨，但现在我怀疑我能否得到任何帮助。
