Rails 7和Import-map以及加载自定义JS文件

Question

我尝试加载自定义js，但遇到了错误。

错误消息如下。

未能注册控制器：notification (controllers/notification_controller) 错误：无法解析从 http://localhost:3000/assets/controllers/notification_controller... 导入的 '@noty' 模块。

│   ├── javascript
│   │   ├── application.js
│   │   ├── controllers
│   │   │   ├── application.js
│   │   │   ├── index.js
│   │   │   ├── notification_controller.js
│   │   └── lib
│   │       └── noty.js

notification_controller.js

import { Controller } from "@hotwired/stimulus"
import Noty from "@noty"

export default class extends Controller {
  static targets = [ 'type', 'message' ]

  ....// some codes.

}

config/importmap.rb

# Pin npm packages by running ./bin/importmap

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"

## lib
pin "@noty", to: "app/javascript/lib/noty.js", preload: true

我做错了什么？另外还有一些问题，"stimulus.min.js"和"turbo.min.js"文件在哪里存在？

- Jin Lim

Answer 1

您的错误是因为需要修复路径。

pin "@noty", to: "app/javascript/lib/noty.js", preload: true

修改为

pin "@noty", to: "lib/noty.js", preload: true

然而，由于该库导出模块的方式，导入 Noty 库时可能会遇到更多问题。通过资产管道添加库是最简单的方法。

操作步骤如下：

1. 将 noty.js 添加至 app/assets/config
2. 将 noty.css 添加至 app/assets/stylesheets
3. 在 app/assets/config/manifest.js 中添加 //= link noty.js
4. 将以下内容添加至 app/views/layouts/application.html.erb

<%= stylesheet_link_tag "noty" %>
<%= javascript_include_tag "noty" %>

完成此操作后，Noty 应该可以在您的js控制器中使用。例如：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ 'type', 'message' ]

  test(){
    var noty = new Noty({text: 'Hi!'});
    noty.show();
  }
}

- Cameron

---

pin "@noty", to: "lib/noty.js", preload: true 对我不起作用。浏览器一直提示“相对引用必须以“/”、“./”或“../”开头”。”。 - Robert Reiz

@RobertReiz，浏览器控制台的错误消息已知于Rails开发组，是预期的，也没有进一步的影响。有点偏离主题… - Jerome