webpack - 如何在 webpack 中使用 fancybox？

Question

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

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

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

然后在我的代码中，我尝试初始化一个 fancybox 对象，但没有任何 react 。它根本不会引发任何错误。

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

如果我对这些变量进行控制台日志，我会得到:

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

这意味着 slick 模块正在正确加载，但不是 fancybox。

Somewhere我读到你必须使用 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

其次，我挖掘了 Fancybox 原始代码，发现它需要将 jQuery 作为 window.jQuery 传递给它。而不是 $所以在我的要求中，我这样做了:

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

瞧!现在一切正常。