如何在Rails 6中要求自定义JS文件

27

我正在尝试使用Rails 6.0.0.rc1,它似乎将默认的javascript文件夹从app/assets/javascript移动到app/javascript。现在,application.js文件位于app/javascript/packs。我想添加一些js文件,但由于某种原因它们无法被导入,我在Rails 6中找不到任何相关文档。我尝试了以下方法:

  1. app/javascript/packs下创建一个新文件夹custom_js,把所有的js文件放在里面,然后在application.js中添加require "custom_js"

  2. 将所有的js文件复制到app/javascript/channels下(应该包含在默认情况下,因为application.jsrequire("channels"))。

  3. application.js中添加require_tree .,这是以前的做法。

如何在Rails 6应用程序中加载自己的js文件?


Webpacker在Rails 6中取代了Asset Pipeline。我建议在升级到Rails 6之前迁移到Webpacker。 - phoet
3个回答

65

使用以下方法,可以使代码更加有组织性并避免在application.html.erb文件中使用多个javascript_pack_tags:

  1. 将自定义的example.js javascript文件添加到app/javascript/packs目录。
  2. 将require("packs/example")添加到application.js文件中。

我本来想给Asim Hashmi的正确答案添加评论,但是我的声望不够,所以我会将我的建议作为答案添加。

在require中不需要包含".js"扩展名。


5
如何为每个控制器操作指定特定的JS文件? - truongnm
3
例如:user/index.js,user/show.js,user/form.js - truongnm
有没有办法避免逐个添加所有文件的名称?比如整个文件夹? - baash05

25

要将自定义Javascript文件添加到Rails 6(Webpacker)中,请执行以下步骤:

1。在app/javascript/packs目录中创建名为custom.js的自定义文件。

为了测试目的,在其中写入任何console.log

// app/javascript/packs/custom.js

console.log("custom js file loaded")

2. 前往你的application.html.erb,并在你的<head></head>结尾处添加以下行:

<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>

3. 现在执行rake assets:precompile命令,这将打包你的javascript代码(包括我们刚刚添加的自定义文件)。

现在重新加载页面,您应该可以看到消息。

custom js file loaded

在您的浏览器控制台中。


1

我自定义的JS有一些函数,将被嵌入到几个HTML页面的JavaScript中调用。下面的代码片段在由webpacker编译的Rails6中有效:

  1. 将自定义JS文件放在app/javascript/packs文件夹中,例如:app/javascript/packs/my_functions.js

say_hello = function(a_text){ 
    console.log("HELLO "+ a_text);  
}

  1. 在HTML文件中添加javascript_pack_tag,例如index.html.erb。

<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->

<script>
$(document).ready(function(){
    say_hello('ABer')
});
</script>

注意:此行位于HTML主体中,而不是头部。

<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接