使用 Webpack 在 Rails 6 中安装 Glide.js答案

【问题标题】：Install Glide.js in Rails 6 with Webpack使用 Webpack 在 Rails 6 中安装 Glide.js
【发布时间】：2020-01-08 09:46:28
【问题描述】：

我创建了一个新的 Rails 6 项目，并尝试通过 Webpack 安装第三方 JavaScript 库 Glide.js。但是，我似乎错过了一个关键步骤，因为它不起作用。

到目前为止我做了什么：

使用纱线安装 Glide.js：yarn add @glidejs/glide
在 /app/javascript/packs/application.js 中需要 Glide.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()
})

在/app/views/layouts/application.html.erb中添加javascript_pack_tag：

<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 服务器并尝试在 Web 控制台中创建 Glide 对象时，我收到错误：

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

如何才能成功安装 Glide.js？

【问题讨论】：

标签： ruby-on-rails webpack ruby-on-rails-6 glidejs

【解决方案1】：

使用 ES 模块

import Glide from '@glidejs/glide'

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

这是关于设置https://glidejs.com/docs/setup/的官方文档

【讨论】：

【解决方案2】：

代替 CommonJS require 使用 ES6 import

import "bootstrap"
import Glide from "@glidejs/glide"
import "../stylesheets/application"

【讨论】：