Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - Rails 6 应用程序使用 Yarn (webpacker) 安装 Glide.js - 未捕获的 ReferenceError : Glide is not defined

In lại 作者：行者123 更新时间：2023-11-29 20:27:51 33 4
mua khóa gpt4 Nike

我真的为 Rails 的所有新 JS 更改而苦苦挣扎。我正在尝试实现非常简单的 slider 脚本 Glide.js

Đây là của tôi app/javascripts/packs/front.js 文件:

// Internal
// require("@rails/ujs")
import Glide from '@glidejs/glide'
console.log(Glide);

import Rails from '@rails/ujs'
Rails.start()
require('jquery')
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Custom

require('./vendor_js/vendor_import.js')

这是我在其中调用 gilder (new_slider.js) 的文件:

// require("./slider.js");
require("./new_slider.js");

require("./mBox.js");
require("./lightbox_script.js");
require("./map.js");
// import lightbox from "packs/custom/lightbox_script.js";

Đây là new_slider.js 文件:

$(document).on('turbolinks:load', function(){
  console.log("new_slider.js is loaded");
  var slider = document.querySelector('.glide');

  if (slider) {
    var glide = new Glide(slider);
    console.log("glide is loaded:");
    console.log(glide);
    glide.mount();
  }

});

这是我的 haml View :

.glide
  .glide__track{"data-glide-el" => "track"}
    %ul.glide__slides
      %li.glide__slide
        %img{:src => asset_path('slider/winter_holidays/1.jpg'), :style => "width:100%"}/
      %li.glide__slide
        %img{:src => asset_path('slider/winter_holidays/2.jpg'), :style => "width:100%"}/
      %li.glide__slide
        %img{:src => asset_path('slider/winter_holidays/3.jpg'), :style => "width:100%"}/

  %div{"data-glide-el" => "controls"}
    %button{"data-glide-dir" => "<<"} start
    %button{"data-glide-dir" => ">>"} end

这是我的控制台输出:

ƒ Glide$$1() {
    classCallCheck(this, Glide$$1);
    return possibleConstructorReturn(this, (Glide$$1.__proto__ || Object.getPrototypeOf(Glide$$1)).apply(this, arguments));
  }
new_slider.js:2 new_slider.js is loaded
new_slider.js:6 Uncaught ReferenceError: Glide is not defined
    at HTMLDocument. (new_slider.js:6)
    at HTMLDocument.dispatch (event.js:328)
    at HTMLDocument.elemData.handle (event.js:148)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

Gilde 显然已加载，因为 console.log(Glide) 提供了输出。 new_slider.js 文件是在导入Gilde 后加载的，所以不会有任何冲突。到目前为止我发现的唯一问题是 this one ，但不幸的是，它根本没有帮助。

有人能给我指出正确的方向吗？

1 Câu trả lời

在 Webpack 领域，您通常需要在要使用它的每个文件中显式导入给定模块。所以，即使你在 app/javascripts/packs/front.js 中导入了 Trượt，如果你想在 new_slider.js 中引用它，您还需要将其导入那里:

// new_slider.js
import Glide from '@glidejs/glide';

// ...

关于javascript - Rails 6 应用程序使用 Yarn (webpacker) 安装 Glide.js - 未捕获的 ReferenceError : Glide is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58895625/

33 4 0
Bài viết được đề xuất: android - 如何去除透明 ActionBar 的标题背景？
Bài viết được đề xuất: mysql - 合并两个表的值时，获取操作数应包含 1 列错误
Bài viết được đề xuất: php - 我可以在 PHP 中混合使用 MySQL API 吗？
Bài viết được đề xuất: mysql - SQL GROUP BY 选择具有最高日期的行
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com