如何在 Rails 6 中包含自定义 JS(特别是 AOS.js)
How to include custom JS (AOS.js specifically) in Rails 6
我是 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 link 中包含一个 javascript_include_tag
,或者只是将 CDN 代码粘贴到控制台时,AOS 已定义并且一切正常。
为什么我在application.js中需要AOS却未定义?感谢您的帮助!
只需使用 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")
我是 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 link 中包含一个 javascript_include_tag
,或者只是将 CDN 代码粘贴到控制台时,AOS 已定义并且一切正常。
为什么我在application.js中需要AOS却未定义?感谢您的帮助!
只需使用 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")