如何在Rails 6中执行自定义的JavaScript函数

Question

随着Webpacker到达Ruby On Rails，我找不到一种使用我的JavaScript函数的方法。

我有一个名为app-globals.js的文件，其中包含一个用于测试的函数：

function alerts() {
  alert("TEST")
}

然后我想在我的一个视图中使用它：

<% = button_tag 'Button', type: 'button', onClick: 'alerts ()'%>

当我按下按钮时，浏览器控制台显示以下错误：

ReferenceError: alerts is not defined

我将app-globals.js文件放置在"app/javascript"中，并在"app/javascript/packs/application.js"中放置了require("app-globals")。

无论哪种情况，都会出现错误。我将app-globals.js移动到"app/javascript/packs"中，并从application.js中删除了require("app-globals")。

- Johan Donado B.

---

这个回答解决了你的问题吗？Rails 5/6：如何使用webpacker包含JS函数？ - Michael Chaney

Answer 1

有一个解决方法。您可以：

将函数签名从以下内容更改为：

function myFunction() { ... }

to:

window.myFunction = function() { ... }

所以在你的代码中，我们可以像下面这样操作：

app/javascript/packs/app-globals.js

window.alerts = function() {
    alert ("TEST");
}

然后将此文件要求到application.js中：

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()

require("@rails/activestorage").start()
require("channels")
require("jquery")

import $ from 'jquery'
window.jQuery = $;
window.$ = $;


require("packs/app-globals") ## require your file

- code_aks

---

这不是正确的做法。问题是重复的，请参见 https://dev59.com/hVQJ5IYBdhLWcg3wIiS5#56549843 和我在那里的正确答案。 - Michael Chaney

请注意，本答案的部分内容是从早期问题的错误答案中复制/粘贴的。 - Michael Chaney

这不是错误的答案，我已经在我的Rails 6项目中实现了相同的内容，并且成功地工作。目前我也正在使用Rails 6应用程序工作。 您可以看到此评论也许以上所有内容都有效- Alexander Gorg他也指出了同样的事情。 - code_aks

这个答案不正确。是的，它可以工作，但这不是使用新的JavaScript包的正确方式。请查看上面链接中的我的正确答案。 - Michael Chaney

这对我有用，但只适用于一个函数。当我尝试执行多个函数（例如window.showNum() window.showAlph() window.myFunction()）时，它完全停止工作了。 - developer01