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

Question

我目前正在尝试 Rails 6.0.0.rc1，它似乎已将默认 javascript 文件夹从 app/assets/javascript 移动到 app/javascript。 application.js 文件现在位于 app/javascript/packs。现在，我想添加几个 js 文件，但由于某些原因它们没有被导入，而且我在 Rails 中找不到任何关于如何完成此操作的文档。我尝试了一些事情:

在app/javascript/packs下新建一个文件夹custom_js，把我所有的js文件放在那里，然后在application.js中添加一个require "custom_js"。
复制我在app/javascript/channels下的所有js文件（默认情况下应该包括在内，因为application.js有require("channels")）。
将require_tree .添加到application.js，这是以前的做法。

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

Answer 1

您需要执行以下步骤将自定义 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

在您的浏览器控制台中

希望对您有所帮助:)

Answer 2

使用此方法获取 better-organized 代码并避免在 application.html.erb 文件中出现多个 javascript_pack_tags：

将您的自定义 example.js javascript 文件添加到 app/javascript/packs。
将 require("packs/example") 添加到您的 application.js 文件。

我想对 Asim Hashmi 的正确答案添加评论。但是我没有足够的声誉，所以我会添加我的建议作为答案。

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

Answer 3

我的自定义 js 具有将由多个 html 页面的嵌入式 javascript 调用的功能。以下代码片段适用于 Rails6，由 webpacker 编译：

将自定义 js 文件放入文件夹 app/javascript/packs 例如app/javascript/packs/my_functions.js

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

在 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>

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

How to require custom JS files in Rails 6

ruby-on-rails

ruby-on-rails-6