如何将自定义 JS 文件添加到新的 rails 7 项目答案

【问题标题】：How to add custom JS file to new rails 7 project如何将自定义 JS 文件添加到新的 rails 7 项目
【发布时间】：2022-01-01 12:18:47
【问题描述】：

我创建了新的 rails 7 项目 rails new my_project，但在包含要由 rails 处理的自定义 JS 文件时遇到问题。

我的“javascript/application.js”

import "@hotwired/turbo-rails"
import "controllers"

import "chartkick"
import "Chart.bundle"
import "custom/uni_toggle"

我的自定义 JS 文件：“javascript/custom/uni_toggle.js”

function uniToggleShow() {
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.remove("hidden"))
}

function uniToggleHide() {
    console.log("uni toggle hide")
    document.querySelectorAll(".uni-toggle").forEach(e => e.classList.add("hidden"))
}

window.uniToggleShow = uniToggleShow
window.uniToggleHide = uniToggleHide

我在我的布局中使用<%= javascript_importmap_tags %>

还有我的“confing/importmap.rb”

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

【问题讨论】：

标签： javascript ruby-on-rails-7 import-maps

【解决方案1】：

看完DHHvideo我找到了最后一块拼图。

为了使我的自定义 JS 代码正常工作，我只是将这一行添加到“confing/importmap.rb”

pin_all_from "app/javascript/custom", under: "custom"

【讨论】：

【解决方案2】：

在我的 Rails 7 应用程序中添加自定义 JS 文件时也遇到了问题。我什至关注了 DHH 视频 --> https://www.youtube.com/watch?v=PtxZvFnL2i0 但仍然面临困难。以下步骤对我有用：

转到 config/importmap.rb 并添加以下内容： pin_all_来自“app/javascript/custom”，位于：“custom”
转到 app/javascript/application.js 文件并添加以下内容：导入“自定义/主”
在“app/javascript”目录下，添加“custom”文件夹。
在“app/javascript/custom”目录中添加您的自定义 js 文件“main.js”。
在您的终端中运行： rails assets: 预编译
启动您的 Rails 服务器。瞧?

【讨论】：