Как импортировать node_modules с помощью Webpacker

Я новичок во всей игре JS / webpacker и не понимаю, как импортировать и использовать пакет javascript с помощью webpacker.

Я пытаюсь включить и использовать библиотеку Animate On Scroll.

У меня установлен и работает Webpacker (я знаю, что он работает, потому что могу с удовольствием использовать StimulusJs).

Вот как выглядит мой файл /javascript/packs/application.js:

import {
  Application
} from "stimulus"
import {
  definitionsFromContext
} from "stimulus/webpack-helpers"
import {
  trix
} from "trix"
import AOS from "aos"

const application = Application.start()
const context = require.context("controllers", true, /.js$/)
application.load(definitionsFromContext(context))
AOS.init();

Мой javascript_pack_tag включен в application.html.erb как <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

Я импортировал необходимые файлы css, используя свой /assets/css/application.scss с @import 'aos/dist/aos';, так что это не должно быть проблемой.

Когда я пытаюсь использовать пакет AOS, делая что-то вроде <h1 class="text-center" data-aos="fade-in">This is a header.</h1>, ничего не происходит. Что мне не хватает?

Спасибо.


ruby-on-rails yarnpkg webpacker
person Rich    schedule 02.11.2018    source источник
comment
есть ли ошибка в консоли js?   -  person Mshka    schedule 30.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Прочитав это снова, я полагаю, что это скорее проблема JS, с которой вы столкнулись. Я оставлю свои соображения по поводу CSS ниже на всякий случай. См. Четвертый пункт о webpack-dev-server, если вы его еще не используете. Ваш браузер поддерживает отсрочку? Вы можете попробовать переместить скрипты прямо перед </body>, чтобы увидеть. Я бы, наверное, сразу перешел к делу и установил точку останова javascript в AOS.init() и посмотрел, что происходит.

Несколько моментов, на которые я недавно опирался, чтобы лучше понять webpacker / css / sprockets ...

Во-первых, CSS в папке с ресурсами находится за пределами веб-пакета. Это звездочки. Это не проблема, но часто смешивание этих двух вещей создает проблемы.

По крайней мере, вам понадобится stylesheet_link_tag 'application'... в дополнение к тегам pack.

Во-вторых, AOS добавляется через yarn или это драгоценный камень? Драгоценные камни с веб-пакетом могут быть немного сложными. Я и другие, с которыми я столкнулся, отказались от попыток использовать gem-ресурсы в webpack. Лучше всего использовать модули yarn / npm для webpack. В противном случае переместите все ресурсы в конвейер звездочек (то есть в папку assets/) и используйте их для этой части вашего сайта. (их можно смешивать, просто держите их отдельно).

В-третьих, если модуль AOS добавлен через yarn add ... (т. е. находится в каталоге nodule_modules), попробуйте заменить импорт CSS на просто

@import '~aos';

Это работает, потому что node_modules находится в пути поиска, и если в папке плагина есть package.json манифест и он включает запись стиля, он извлекает путь к файлу css оттуда.

В-третьих, вы можете попробовать перенести CSS в webpack. Попробуй это...

  1. Создайте application.scss файл в подпапке components
  2. Добавьте в свой packs/application.js файл: import '../components/application.scss
  3. Добавьте stylesheet_pack_tag 'application' .... в свой макет
  4. Поместите свой импорт css (из узловых модулей) в новый application.scss

Четвертый: используйте bin/webpack-dev-server. Это компилирует веб-пакет на лету всякий раз, когда любой из ваших исходных файлов изменяется, а не при каждой загрузке страницы (экономит ваше время). Поскольку ваш CSS теперь находится в веб-пакете, он выдаст вам ошибки, если импорт будет неправильным (хотя звездочки тоже должны делать это в журналах вашего сервера).

Удачи! Становится проще, и пряжа / веб-пакет - это круто, лучше, чем старые ruby-gems-for-front-end-components, IMO

person Hari Honor    schedule 14.08.2020