如何在Rails 6中包含自定义JS（特别是AOS.js）

Question

我是Rails 6 + Webpack的新手，所以请多多包涵。

我正在尝试将aos.js加载到Rails 6中，然后从视图文件中调用它。

我创建了javascript/custom/aos.js，其中包含this code，并附加了以下代码段：

console.log("typeof(AOS): " + typeof(AOS))

我的application.js在这里：

require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom/aos") // <===== The custom file I'm importing

var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
require("trix")
require("@rails/actiontext")

加载页面时，我得到：

[typeof(AOS): undefined，所以我知道文件已包括在内，但AOS仍未定义。

但是，当我在CDN链接中包含javascript_include_tag或只是将CDN代码粘贴到控制台中时，就定义了AOS，并且一切正常。

[为什么在application.js中需要AOS时未定义AOS？感谢您的帮助！

Answer 1

$ yarn add aos

然后将其导入您自己的使用AOS的脚本中：

// app/javascripts/pesky_scrolly_stuff.js
import AOS from 'aos';

AOS.init({
  startEvent: 'turbolinks:load' // if you are using turbolinks
});

并且要求您的脚本加入包装：

// app/javascripts/packs/application.js
require("pesky_scrolly_stuff")