ruby-on-rails - 使用 Webpack 在 Rails 6 中安装 Glide.js
问题描述
我创建了一个新的 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?
解决方案
代替 CommonJSrequire
使用 ES6import
import "bootstrap"
import Glide from "@glidejs/glide"
import "../stylesheets/application"
推荐阅读
- asp.net - MVC 5 模型子列表无法在部分视图中呈现
- ios - 为什么将应用程序从后台带到前台时自动布局会崩溃?
- python - 我想在数据框中将时间戳更改为日期时间
- optimization - 为什么解释显示“使用索引条件”?
- ios - 如何将 SKSpriteNode 移动到其约束之外的区域?
- python - 仅对数据框的某些类型的列执行 numpy 随机选择
- r - 计算每个子组的百分比
- json - 无效的 OpenAPI JSON 文件 - 预期类型对象,但找到安全定义的类型字符串
- python - 如何加载 NTU rgbd 数据集?
- ios - 如何防止我的调试版本和发布版本使用相同的钥匙串数据?