为什么外部JavaScript文件在Rails 6中不能正常工作？

Question

我正在使用Rails 6，并尝试将自定义的JavaScript文件移动到外部文件中，但无法正常工作。如果我将代码移到erb文件中，JavaScript代码可以正常工作。你能帮助我吗？

这是index.html.erb（app/views/home/index.html.erb）：

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<i class="fab fa-twitter"></i>
<i class="fas fa-home"> </i>

<button id="target" value="submit">Submit</button>

<script>
 // this code is working if i put inside .erb file
 /* $( "#target" ).click(function() {alert( "Testing" );}); */
</script>

这是 custom.js（app/javascript/packs/custom.js）文件。

console.log("File loaded");
$( "#target" ).click(function() {
    alert( "Testing" );
});

这是我的应用程序.js（app/javascript/packs/application.js）

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require("packs/custom")

这是我的环境配置文件environment.js（app/config/webpack/environment.js）：

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment

- ahz

---

你使用哪种环境来运行应用程序？（开发/生产） - CanciuCostin

Answer 1

你应该替换这个代码。

<%= javascript_pack_tag "custom", "data-turbolinks-track" => true %>

这将会寻找你的打包文件，而 include 则会寻找你的资产文件夹。

- Akash Agarwal

Answer 2

我知道现在有点晚了，但是我之前也遇到了同样的问题，并且我解决它的方法是添加以下内容：

jQuery(() => {
   //Your js goes here
})

或者等效的 $(document).ready(() =>{})

这是因为 Turbolinks 不兼容。虽然有其他解决方法，但目前在我的情况下这个方法起了作用。

- svelandiag

Answer 3

请确保在开发模式下运行您的应用程序：

rails s -e development

如果您在生产模式下运行它，请确保在此之前运行此命令：

RAILS_ENV=production bundle exec rails webpacker:compile

你也可以选择仅为特定视图包含.js文件。 在index.html.erb中，您可以添加：

<%= javascript_include_tag "custom", "data-turbolinks-track" => true  %>

- CanciuCostin