Techioz Blog

Rails 7インポートマップとbulmaとjquery

概要

Rails 7のインポートマップを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

アプリ/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 }

アプリ/javascript/コントローラー/index.js


import { application } from "controllers/application"

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

JavaScript コンソールでアプリケーションをロードしようとすると、bulma スタイルは機能しているように見えますが、jquery は機能していません。 application.js で $ を設定しているにもかかわらず、「Uncaught ReferenceError: $ が定義されていません」というメッセージが表示されます。 「Uncaught TypeError: The specifier “controllers/application” was a bare specifier」という別のエラーもあります。

importmap を使用するのはこれが初めてで、npm、webpacker、yarn を切り出せるというアイデアは気に入っていますが、これらすべてのファイルがどのように連携して動作するかを解析するのに非常に苦労しています。

解決策

新しい Rails アプリを作成するだけで、私が戻そうとしているセットアップを確認できます。

このファイル app/assets/javascripts/application.js を削除します。application.js を 2 つ持つことはできません。

//= link_tree ../../javascript .js ですでにカバーされているため、これらは必要ありません。

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

なぜスティミュラスの初期化をコピーするのかわかりませんが、それはすでにコントローラーディレクトリで行われています。

// app/assets/javascripts/application.js

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

ターボリンクではなくターボを使用しています。 Rails 7 には Rails UJS はありません。それを元に戻したくありません。

ダウンロードする必要はありません。固定するだけです。

bin/importmap pin jquery -f jsdelivr

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=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";
これは、ブラウザの