我正在开发一个 Rails 7 应用程序，该应用程序使用 importmaps 来处理所有 JS 相关的内容。作为参考，我给出了下面的代码。
导入map.rb
# Pin npm packages by running ./bin/importmap
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
# Jquery related pins
pin "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js"
pin "jquery-easing", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"
# end jquery related pins
# JS inside app/javascript
pin "sb-admin-2.min"
pin_all_from "app/javascript/demo", under: "demo"
# JS inside app/javascript
# JS inside vendor/javascript
# pin_all_from "vendor/javascript/charts", under: "charts"
pin "charts/Chart.bundle.min"
pin "charts/Chart.min"
# JS inside vendor/javascript
application.js (app/javasript/application.js)
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
// import jquery and jquery-easing
import "jquery"
import "jquery-easing"
// import jquery and jquery-easing
console.log($)
// import app/javascript
import "sb-admin-2.min"
import "demo/chart-area-demo"
// import app/javascript
// import vendor/javascript
import "charts/Chart.bundle.min"
import "charts/Chart.min"
// import vendor/javascript
问题
我的问题是，当我登陆此页面时，我的 console.log($) 没有显示任何内容，也没有在控制台中给出任何错误。我的图表也是如此。但是当我自己刷新页面时，它会显示 console.log($) 并且图表也开始工作。
您的问题并非特定于 Rails，而是您如何尝试在应用程序中导入 jQuery 代码的问题。当您将包固定到导入映射时，请确保您固定的代码作为模块导出。这是一个例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--
JSPM Generator Import Map
Edit URL: https://generator.jspm.io/#U2VhYGBiDs0rySzJSU1hyCosTS2q1E1NLM7MS3cw0DPQM4SKORjrmesZAgDeG2A5LwA
-->
<script type="importmap">
{
"imports": {
"jquery": "https://ga.jspm.io/npm:[email protected]/dist/jquery.js",
"jquery-easing": "https://ga.jspm.io/npm:[email protected]/dist/jquery.easing.1.3.umd.js"
}
}
</script>
<a href="#hello">Click me to scroll</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="hello">Hello!</a>
<!-- ES Module Shims import maps polyfills -->
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="module">
import $ from 'jquery';
import 'jquery-easing';
// Example usage
$(document).ready(function() {
$("a").click(function(event) {
event.preventDefault();
$("html, body").animate(
{ scrollTop: $($(this).attr("href")).offset().top },
800, // duration
"easeInOutExpo" // easing function
);
});
});
</script>
</body>
</html>
如果需要，将所有导入语句更改为模块导入语法，如下所示：
// import jquery and jquery-easing
import $ from 'jquery';
import 'jquery-easing';
console.log($)