ruby Rails 7 importmap与bulma和jquery

amrnrhlw 于 2023-10-17 发布在 Ruby

关注(0)|答案(1)|浏览(170)

我在让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不工作。我看到“未捕获的引用错误：$ is not defined”，即使我在application.js中设置了$。还有一个错误告诉我“未捕获的类型错误：说明符“控制器/应用程序”是一个空的说明符”。

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

ruby

来源：https://stackoverflow.com/questions/77001241/rails-7-importmap-with-bulma-and-jquery

1条答案

按热度按时间

nwlqm0z11#

安装

你可以做一个新的rails应用程序来看看我试图带你回到的设置。
删除此文件app/assets/javascripts/application.js，不能有两个application.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，不是涡轮链接。Rails 7中没有Rails UJS，你真的不想把它带回来。

Jquery

不需要下载，只需固定即可：

bin/importmap pin jquery -f jsdelivr

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

布尔玛

布尔玛是css：

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

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

或者import（这是一个普通的css导入，浏览器应该负责）：

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

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

导入Map

这最终在浏览器中的<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就是你在config/importmap.rb中使用pin和pin_all_from命令构建的。如果你没有看到什么，你不能导入它，除非你使用完整的网址：

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";

对于你的本地文件也是一样，它们必须被Map，或者用rails的术语来说是固定的。这个过程通过sprockets来定位文件。但我想我在这里已经涵盖了它：

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

赞(0）回复(0）举报 2023-10-17

我来回答

ruby Rails 7 importmap与bulma和jquery

1条答案

安装

Jquery

布尔玛

导入Map

相关问题

热门标签

最新问答