Rails 7导入映射 - 导入具有自定义脚本的文件夹

Question

我正在尝试使用Rails 7和import maps进行实验。试图导入一个包含一些自定义JS文件的文件夹。

# config/importmap.rb
pin_all_from "app/javascript/custom", under: "custom"

# app/javascript/application.js
import "custom"

在Chrome浏览器中出现错误信息Uncaught TypeError: Failed to resolve module specifier "custom"，在Firefox浏览器中出现错误信息Uncaught Error: Unable to resolve specifier 'custom' from [shim]。

有趣的是import "custom/script"可以正常工作。请问我做错了什么？

- Phil-6

---

import "custom/script" 对我也会抛出错误（Firefox）。 - TomDogg

Answer 1

我曾经遇到过相同的问题，并找到了以下解决方案：

# app/javascript/application.js
import "custom/my_custom_code.js"

这意味着pin_all_from "app/javascript/custom", under: "custom"实际上只是将每个自定义JS文件都放在custom命名空间下可用。因此，您仍然需要单独导入每个文件。

- Tristan Hart

Answer 2

虽然在某些情况下这仍然是一个有效的做法，但我认为我尝试做的事情在Rails 7中有点反模式。

使用Stimulus控制器非常容易。

Stimulus手册 参考

例如，当用户单击“x”时关闭警报。

// app/javascript/alerts_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    dismiss () {
        this.element.style.display = 'none';
    }
}

<div data-controller="alerts">
    <h2> Alert! </h2>
    <span data-action="click->alerts#dismiss"><i class="fas fa-times"></i></span>
</div>

- Phil-6