如何将fancybox与webpack一起使用? [英] How to use fancybox with webpack?

问题描述

我目前正在开发一个网页，并在构建过程中开始使用webpack.我设法使用了通过npm下载的slick-carrousel插件，但无法使fancybox正常工作！

I'm currently developing a webpage and started using webpack in my build process. I've managed to use slick-carrousel plugin downloaded via npm but can't make fancybox to work!

我已经通过npm下载了该文件，并按照文档中的说明进行了导入:

I've downloaded it via npm and imported it as stated in the documentation:

var $ = require("jquery");
var slick = require("slick-carousel");
var fancybox = require("fancybox")($);

然后在我的代码中，我尝试将fancybox对象设为intailize，但是什么也没有发生.它根本不会引发任何错误.

Then in my code I try to initailize a fancybox object and nothing happens. It throws no errors at all.

$(".filtros__filtrar").on('click', function() {    
  $.fancybox.open({
    src  : '#tns-filtros',
    type : 'inline',
    opts : {
      smallBtn: false
    }
  });
});

如果我对这些变量进行控制台记录，则会得到:

If I do a console log of those variables I get:

console.log(fancybox);  ->  undefined
console.log(slick);     ->  {}

这意味着平滑模块正在正确加载，但无法加载fancybox.

Which means slick module is loading correctly but not fancybox.

某处必须使用imports-loader使fancybox识别jquery变量.因此，我通过npm下载了它，并将其包含在我的webpack.config文件中:

Somewhere I read that you have to use imports-loader to make fancybox recognize jquery variables. So I downloaded it via npm and included this in my webpack.config file:

module: {
  rules: [
    {
      test: /fancybox[\/\\]dist[\/\\]js[\/\\]jquery.fancybox.cjs.js/,
      use: "imports-loader?jQuery=jquery,$=jquery,this=>window"
    }
  ]
}

但是它也不起作用.

有人可以告诉我这个话题吗?预先感谢！

Can someone give me a light on this subject? Thanks in advance!

推荐答案

好.我设法解决了这样的问题.

Ok. I managed to solve the problem like this.

首先，我意识到我安装了 Fancybox 2 而不是

First, I realized that I installed Fancybox 2 instead of Fancybox 3 so I uninstalled the first and installed the last (Thanks to @Mikhail Shabrikov for making me realize that!).

npm uninstall fancybox --save-dev
npm install @fancyapps/fancybox --save

第二，我浏览了Fancybox的原始代码，发现它要求jQuery以window.jQuery而不是$的形式传递给它，所以在我的要求中，我这样做了:

Second, I dig through Fancybox original code and saw that it requires jQuery to be passed to it as window.jQuery and not $ so in my requires I did this:

var $ = require("jquery");
window.jQuery = $;  <-- This is what do the magic!!
var slick = require("slick-carousel");
require("@fancyapps/fancybox");

瞧！现在一切正常.

这篇关于如何将fancybox与webpack一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！