使用 Webpack 在 Rails 6 中安装 Glide.js [英] Install Glide.js in Rails 6 with Webpack

查看:81
本文介绍了使用 Webpack 在 Rails 6 中安装 Glide.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建了一个新的 Rails 6 项目,我正在尝试安装第三方 javascript 库 Glide.js通过网络包.但是,我好像错过了一个关键步骤,因为它不起作用.

I created a new Rails 6 project and I'm trying to install the third party javascript library Glide.js via Webpack. However, it seems like I'm missing a crucial step because it's not working.

到目前为止我所做的:

  1. 用yarn安装Glide.js:yarn add @glidejs/glide
  2. /app/javascript/packs/application.js 中需要 Glide.js:
  1. Install Glide.js with yarn: yarn add @glidejs/glide
  2. Require Glide.js in /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. /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 对象时,我收到错误:

When I start the rails server and try to create a Glide object in the web console, I receive the error:

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

如何成功安装 Glide.js?

How can I install Glide.js successfully?

推荐答案

代替 CommonJS require 使用 ES6 import

Instead of CommonJS require use ES6 import

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

这篇关于使用 Webpack 在 Rails 6 中安装 Glide.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆