如何在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仍然没有定义。

但是，当我包含一个带有CDN链接的javascript_include_tag，或者简单地将CDN代码粘贴到控制台中时，AOS就被定义了，一切都很好。

为什么当我在application.js中需要它的时候还没有定义它？，谢谢你的帮助！

Answer 1

只需使用纱线来安装包装。

$ 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")