如何在 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 importingvar componentRequireContext = require.context("components", true);var ReactRailsUJS = require("react_ujs");ReactRailsUJS.useContext(componentRequireContext);require("trix")require("@rails/actiontext")当我加载我的页面时，我得到：typeof(AOS): undefined所以我知道该文件已包含在内，但 AOS 仍未定义。但是，当我javascript_include_tag在 CDN 链接中包含一个，或者只是将 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")