如何使用webpack的fancybox？

Question

我正在开发一个网页,并在我的构建过程中开始使用webpack.我已经设法使用通过npm下载的slick-carrousel插件,但无法使fancybox工作!

我已经通过npm下载了它,并按照文档中的说明导入它:

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

然后在我的代码中,我尝试初始化一个fancybox对象,没有任何反应.它完全没有错误.

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

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

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

这意味着光滑模块正确加载但不是fancybox.

在某处我读到你必须使用imports-loader来使fancybox识别jquery变量.所以我通过npm下载它并将其包含在我的webpack.config文件中:

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

但它也不起作用.

有人可以告诉我这个问题吗？提前致谢!

Answer 1

好.我设法解决了这个问题.

首先,我意识到我安装了Fancybox 2而不是Fancybox 3所以我卸载了第一个并安装了最后一个(感谢@Mikhail Shabrikov让我意识到这一点!).

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

其次,我通过Fancybox原始代码挖掘并发现它需要将jQuery传递给它,window.jQuery而不是$因为我要求我这样做:

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

瞧!现在一切都有效.