How to execute custom javascript functions in Rails 6

问题

With the arrival of Webpacker to Ruby On Rails I can't find a way to use my Javascript functions.

I have a file called app-globals.js with a function to test:

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

Then I want to use it in one of my views:

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

But when I press the button, this error is shown in the browser console:

ReferenceError: alerts is not defined

1. I placed the app-globals.js file in "app / javascript" and in "app / javascript / packs / application.js" I placed require ("app-globals").

2. I moved app-globals.js to "app / javascript / packs" and removed the require ("app-globals") from application.js.

With either case, an error still appears.

Any help please.

Thank you.

回答1:

There is a workaround, though. You can:

change the function signatures from:

function myFunction() { ... }

to:

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

So in your code we can do like below :-

app/javascript/packs/app-globals.js

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

and then require this file to 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

来源：https://stackoverflow.com/questions/59349091/how-to-execute-custom-javascript-functions-in-rails-6