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

【问题标题】：How to require custom JS files in Rails 6如何在 Rails 6 中要求自定义 JS 文件
【发布时间】：2019-10-08 02:33:14
【问题描述】：

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

在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 文件？

【问题讨论】：

webpacker 替换了 rails 6 中的资产管道。我建议在升级到 rails 6 之前迁移到 webpacker。

标签： ruby-on-rails ruby-on-rails-6

【解决方案1】：

我的自定义 js 具有将由多个 html 页面的嵌入式 javascript 调用的函数。以下 sn-p 在 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 正文中，而不是在头部中

&lt;script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

使用这种方法获得组织更好的代码并避免在 application.html.erb 文件中出现多个 javascript_pack_tags：

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

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

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

【讨论】：

如何为每个控制器动作指定js文件？
例如：user/index.js、user/show.js、user/form.js
有没有办法避免必须按名称添加所有文件？喜欢整个文件夹吗？

【解决方案3】：

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

在您的浏览器控制台中

希望对你有帮助:)

【讨论】：

非常感谢。正是我正在寻找的信息。
这是最好的答案。