Установите Glide.js в Rails 6 с помощью Webpack

Я создал новый проект Rails 6 и пытаюсь установить стороннюю библиотеку javascript Glide.js через Webpack. Однако похоже, что я пропускаю важный шаг, потому что он не работает.

Что я сделал до сих пор:

  1. Установите Glide.js с пряжей: yarn add @glidejs/glide
  2. Требовать Glide.js в /app/javascript/packs/application.js:
 require("jquery")
 require("@glidejs/glide")
 require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")

 import "bootstrap"
 import "../stylesheets/application"

 document.addEventListener("turbolinks:load", () => {
     $('[data-toggle="tooltip"]').tooltip()
     $('[data-toggle="popover"]').popover()
})
  1. Добавьте javascript_pack_tag в /app/views/layouts/application.html.erb:
<head>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

Когда я запускаю сервер rails и пытаюсь создать объект Glide в веб-консоли, я получаю сообщение об ошибке:

> new Glide({})
> ReferenceError: Glide is not defined

Как я могу успешно установить Glide.js?


ruby-on-rails webpack ruby-on-rails-6 glidejs
person Debru    schedule 05.09.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо CommonJS require используйте ES6 import

import "bootstrap"
import Glide from "@glidejs/glide"
import "../stylesheets/application"
person Lyzard Kyng    schedule 05.09.2019

arrow_upward
1
arrow_downward

Использование модулей ES

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

Вот официальный документ о настройке https://glidejs.com/docs/setup/

person Feuda    schedule 18.09.2019