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

Question

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

\n

错误如下。

\n

无法注册控制器：通知（controllers/notification_controller）错误：无法解析从http://localhost:3000/assets/controllers/notification_contr导入的说明符“@noty”...

\n

\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 javascript\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 application.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 controllers\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 application.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 notification_controller.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 noty.js\n

\n

notification_controller.js

\n

import { Controller } from "@hotwired/stimulus"\nimport Noty from "@noty"\n\nexport default class extends Controller {\n  static targets = [ 'type', 'message' ]\n\n  ....// some codes.\n\n}\n

\n

配置/导入映射.rb

\n

# Pin npm packages by running ./bin/importmap\n\npin "application", preload: true\npin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true\npin "@hotwired/stimulus", to: "stimulus.min.js", preload: true\npin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true\npin_all_from "app/javascript/controllers", under: "controllers"\n\n## lib\npin "@noty", to: "app/javascript/lib/noty.js", preload: true\n

\n

我做错了什么？我还有其他一些问题是，“stimulus.min.js”和“turbo.min.js”文件存在于哪里？

\n

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();
  }
}