带有 bulma 和 jquery 的 Rails 7 importmap-解网

问：

我无法让 Rails 7 importmaps 与 jquery 和 bulma 很好地配合。

config/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"
pin "bulma", preload: true # @0.9.4
pin "jquery", preload: true # @3.7.0
pin "jquery-ujs", preload: true # @1.2.3
pin "jquery-ui", preload: true # @1.13.2

application.html.erb:

 <head>
  ...
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= javascript_importmap_tags %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= favicon_link_tag asset_path("favicon.png") %>
  <link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
  </head>

app/assets/javascripts/application.js:

import "@hotwired/turbo-rails"
import "controllers"
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
// require lightbox
//= require_tree .
//= require bulma

app/assets/config/manifest.js:

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../javascripts .js
//= link_tree ../../../vendor/javascript .js
//= link controllers/hello_controller.js
//= link controllers/application.js
//= link controllers/index.js

app/javascript/application.js:

import { Application } from "@hotwired/stimulus"
import "controllers"
import "bulma"
import * as jquery from "jquery"
import "jquery-ujs"
import "jquery-ui"

window.jQuery = jquery
window.$ = jquery

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus = application

export { application }

app/javascript/controllers/index.js


import { application } from "controllers/application"

import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

在javascript控制台中，当我尝试加载我的应用程序时，似乎bulma样式正在工作，但jquery却不起作用。我看到“未捕获的引用错误：$未定义”，即使我在应用程序.js中设置。还有另一个错误告诉我“未捕获的 TypeError：说明符”控制器/应用程序“是一个裸露的说明符”。$

这是我第一次使用 importmap，我喜欢能够剪掉 npm、webpacker 和 yarn 的想法，但我真的很难解析所有这些文件应该如何协同工作。

jQuery CSS Ruby-on-Rails Ruby Bulma

答：

0赞 Alex 8/30/2023 #1

清理

你可以制作一个新的 rails 应用程序来查看我试图带你回去的设置。

删除此文件，不能有两个。app/assets/javascripts/application.jsapplication.js

已经被覆盖了，所以不需要这些：//= link_tree ../../javascript .js

//= link controllers/hello_controller.js
//= link controllers/application.js
//= link controllers/index.js

我不知道你为什么要复制刺激初始化，它已经发生在目录中。controllers

// app/assets/javascripts/application.js

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

我们使用的是 Turbo，而不是 turbolinks。Rails 7 中没有 Rails UJS，你真的不想把它带回来。

J查询

无需下载，只需固定即可：

bin/importmap pin jquery -f jsdelivr

https://stackoverflow.com/a/72290313/207090

布尔玛

Bulma 是 css：

<!-- app/views/layouts/application.html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

或导入（这是一个普通的CSS导入，浏览器应该处理）：

/* app/assets/stylesheets/application.css */

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

导入地图

这最终会出现在浏览器的标记中。（查看控制器是如何存在的）：<script type="importmap">

$ bin/importmap json
{
  "imports": {
    "application":                  "/assets/application-c053fb992232353f27edaf9cd84a9062ed61672b85c0a69952d917f7488ff554.js",
    "@hotwired/turbo-rails":        "/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js",
    "@hotwired/stimulus":           "/assets/stimulus-1bd52683afde5c8ff5572f5d49429cea5bf7744ca636fcb830c015d8cccf353e.js",
    "@hotwired/stimulus-loading":   "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "jquery":                       "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js",
    "controllers/application":      "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers":                  "/assets/controllers/index-16af318b40862c438fd6ca780240ce4730b8591e53dc53315b75f360435cf905.js"
  }#    ^                             ^
}  #    |                             |
   #  names you use to import        urls browser uses to get it
   #    |                             ^ 
   #    |                             |
   #    `------>  mapped to  ---------'

这个 json 是您正在构建的内容和命令。如果你在那里没有看到某些内容，则无法导入它，除非你使用的是完整的网址：pinpin_all_fromconfig/importmap.rb

import "jquery";
// works, because it is mapped to a jsdelivr url

// without an import-map you can do this
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js";

对于您的本地文件也是如此，它们必须被映射，或者用 rails 术语固定。该过程用于查找文件。但我想我已经在这里介绍了它：sprockets

https://stackoverflow.com/a/72855705/207090

上一个：SemanticUI 下拉列表隐藏输入值设置为未定义

下一个：owlCarousel 不是 rails 应用程序中的函数

带有 bulma 和 jquery 的 Rails 7 importmap

Rails 7 importmap with bulma and jquery

评论

清理

J查询

布尔玛

导入地图