最終出力されたページがどう生成されているのでしょうか？
Like!
Rails7 importmapsを用いたjsファイルの読み込みができない
解決したいこと
Rails7 importmapsを用いたjsファイルの読み込みができない
質問内容
Ruby on Rails7で、script.jsファイルからjqueryを使いたいです。
html上でscriptタグを用いて直接記述すれば、問題なく読み込まれます。
importmapsを用いてjsファイルから読み込むとうまく読み込まれません。
設定ミスなどあればご教授いただきたいです。
よろしくお願いいたします。
発生している問題・エラー
ファイル構造
└app
└javascript
└script
└script.js
└application.js
└bin
└importmap
└config
└importmap.rb
application.js内記述
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import Rails from "@rails/ujs";
import jquery from 'jquery'
window.$ = jquery
import "script"
Rails.start();
script>script.js内記述
$(function() {
$("#ja").text("jQuery稼働中");
});
Gemfile内記述（bundle install済み）
source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
gem 'react-rails'
ruby "3.1.1"
#javascript用のwebpacker追加
gem 'webpacker'
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.2", ">= 7.0.2.3"
# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"
# Use mysql as the database for Active Record
gem "mysql2", "~> 0.5"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"
# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"
# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"
# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false
# Use Sass to process CSS
gem "sassc-rails"
# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"
group :development, :test do
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
gem "debug", platforms: %i[ mri mingw x64_mingw ]
end
group :development do
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console"
# Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
# gem "rack-mini-profiler"
# Speed up commands on slow machines / big apps [https://github.com/rails/spring]
# gem "spring"
end
group :test do
# Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
gem "capybara"
gem "selenium-webdriver"
gem "webdrivers"
end
bin>importmap内記述
#!/usr/bin/env ruby
require_relative "../config/application"
require "importmap/commands"
config>importmap.rb内記述
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/ujs@6.1.5/lib/assets/compiled/rails-ujs.js"
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
pin_all_from "app/javascript/script", under: "script"
html記述
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tags %>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- JavaScript Bundle with Popper bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- importmaps -->
<%= javascript_importmap_tags %>
</head>
<body>
<div id="ja">
<%="このテキストをjquery稼働中に変えたい"%>
</div>
</body>
</html>
0
1Answer
0