Rails 7 和导入映射以及加载自定义 JS 文件

Question

我正在尝试加载我的自定义 js。但出现错误。

错误如下。

无法注册控制器：通知（controllers/notification_controller）错误：无法解析从 http://localhost:3000/assets/controllers/notification_contr...

│   ├── 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 导入的说明符“@noty”... notification_controller.js 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”文件存在于哪里？

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. 将 //= link noty.js 添加到 app/assets/config/manifest.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();
  }
}