Как включить custom JS (AOS. js специально) в Rails 6 - PullRequest
Новая
       25

Как включить custom JS (AOS. js специально) в Rails 6

0 голосов
/ 16 марта 2020

Я новичок в 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_tag со ссылкой CDN, или просто вставьте код CDN в консоль, AOS определен и все работает нормально.

Почему AOS не определен, когда я требую его в приложении. js? Спасибо за вашу помощь!

1 Ответ

1 голос
/ 16 марта 2020

Просто используйте 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")
...