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

Question

我是 Rails 6 + Webpack 的新手，所以请耐心等待。

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

我创建了javascript/custom/aos.js包含此代码并附加了以下代码片段的代码：

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 仍未定义。

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

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

Answer 1

只需使用 YARN 来安装包即可。

$ yarn add aos

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

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

document.addEventListener('DOMContentLoaded', function() {
  AOS.init({
    startEvent: 'turbolinks:load' // if you are using turbolinks
  });
});

并将您的脚本放入包中：

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