时间戳

首页 > 解决方案 > 为什么外部 javascript 文件在 Rails 6 中不起作用？

javascript - 为什么外部 javascript 文件在 Rails 6 中不起作用？

问题描述

我正在使用 Ruby on 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" );
});

这是我的 application.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

标签： javascriptjqueryrubyruby-on-rails-6

解决方案

你应该更换这个。<%= javascript_pack_tag "custom", "data-turbolinks-track" => true %>

这将查看您的包，而 include 将查看您的资产文件夹。

推荐阅读