Rails 7、Importmaps 和 AOS.js 无法工作

Question

我在这里下载了这个模板https://bootstrapmade.com/regna-bootstrap-onepage-template/

我的目标是让它在rails 7中运行。我将index.html的内容复制到experiment.erb.html。

我将 javascript 内容复制到应用程序 javascript 中。

我的 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 "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/[email protected]/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package

pin_all_from "app/javascript/aos", under: "aos"
pin_all_from "app/javascript/purecounter", under: "purecounter"
pin_all_from "app/javascript/glightbox", under: "glightbox"
pin_all_from "app/javascript/isotope", under: "isotope"
pin_all_from "app/javascript/swiper", under: "swiper"
pin_all_from "app/javascript/main", under: "main"

我的 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 'bootstrap';

import 'aos/aos';
import 'purecounter/purecounter_vanilla';
import 'glightbox/glightbox';
import 'isotope/isotope';
import 'swiper/swiper-bundle.min';
import 'main/main';
 

我在 Chrome 浏览器中的错误消息是

aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'AOS')
    at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:182
    at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:187
(anonymous) @ aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1
(anonymous) @ aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1 

[vscode 中的文件结构

如果您知道我需要解决什么问题，请解释一下。

Answer 1

导轨7

./bin/importmap pin aos

导入地图.rb

pin 'aos', to: 'aos.js', preload: true

=>供应商/javascript/aos.js

application.js

import AOS from 'aos';
AOS.init();

配置/资产

Rails.application.config.assets.precompile += %w[aos.js]

对我有用。