24

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

  1. custom_js在下创建一个新文件夹，将我所有的js文件放在那里，app/javascript/packs然后添加一个require "custom_js"到application.js

  2. 复制我所有的 js 文件app/javascript/channels（默认情况下应该包含，因为application.jshas require("channels")）。

  3. 添加require_tree .到application.js，这是以前的方法。

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

4

3 回答 3

61

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

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

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

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

于 2019-06-10T10:06:57.610 回答
22

您需要执行以下步骤将自定义 javascript 文件添加到 rails 6 (webpacker)

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

出于测试目的，请在其中写入任何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

在您的浏览器控制台中

希望能帮助到你 ：）

于 2019-05-21T21:06:17.793 回答
1

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

  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>

于 2020-09-10T04:41:34.853 回答