如何在 Rails 6 中要求自定义 JS 文件
Posted
技术标签:
【中文标题】如何在 Rails 6 中要求自定义 JS 文件【英文标题】：How to require custom JS files in Rails 6 【发布时间】：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。 【参考方案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 正文中，而不是在头部中
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>【讨论】：
【参考方案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
在您的浏览器控制台中
希望对你有帮助:)
【讨论】：
非常感谢。正是我正在寻找的信息。 这是最好的答案。以上是关于如何在 Rails 6 中要求自定义 JS 文件的主要内容，如果未能解决你的问题，请参考以下文章
将 Bootstrap 主题（带有自定义 CSS 和 JS 插件）与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成
如何在 Rails 6 和 Webpacker（以及引导程序和 SASS/SCSS）中安装自定义字体