如何在Webpack中使用Fancybox？

Question

我目前正在开发一个网页，开始在我的构建过程中使用webpack。我已经成功地使用了通过npm下载的slick-carousel插件，但是无法使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);     ->  {}

这意味着 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"
    }
  ]
}

但它也不起作用。

有人能给我关于这个主题的提示吗？先谢谢了！

- Jaditpol

---

{btsdaf} - Mikhail Shabrikov

我没有收到任何错误信息，这真是让人烦恼。我想使用Fancybox 3，但刚刚意识到我下载了Fancybox 2。也许这就是问题的一部分。我需要检查一下。 - Jaditpol

Answer 1

好的，我是这样解决问题的。

首先，我意识到我安装了Fancybox 2而不是Fancybox 3，所以我卸载了第一个并安装了后者（感谢@Mikhail Shabrikov让我意识到了这一点！）。

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

接下来，我仔细研究了Fancybox的原始代码，并发现它需要将jQuery作为window.jQuery传递给它，而不是$，因此在我的要求中，我这样做：

其译文为：

其次，我查看了Fancybox的原始代码，并发现它要求作为参数的 jQuery 应该被称作 window.jQuery 而不是 $，所以��我的代码里我做了如下更改：

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

瞧！现在一切都正常了。

- Jaditpol

---

“require” 对我来说很关键，而不是 “import” - 谢谢！ - schmoove

使用 window.jQuery = $; 是一种非常丑陋的hack。Ito Pizarro的答案有助于摆脱这行代码。 - cezar

我建议你这样安装 npm install @fancyapps/fancybox --save（不要使用--save-dev），因为fancybox是用于前端而不是构建工具等。 - Christoffer Helgelin Hald

没错，已修复。谢谢@ChristofferHelgelinHald - Jaditpol

Answer 2

这并不完全正确——"我已经通过npm下载了它，并像文档中所述导入了它"。您不必将require('fancybox')($)赋值给变量，因为这个调用没有返回值。下面是来自文档的代码片段：

var $ = require('jquery');

require('fancybox')($); <------- (2)

您可以使用console.log($.fancybox)检查jQuery对象是否具有fancybox方法。如果它返回一个函数，那么说明您已经成功地将fancybox包导入到了您的代码中。因此，您应该在其他地方寻找错误的原因。在这种情况下，请检查您传递给$.fancybox.open的对象是否正确。据我所知，此对象的src属性应该包含您想要展示的图像或视频的url地址。就像来自fancybox官方网站的此示例中一样。

- Mikhail Shabrikov

---

你是完全正确的Mikhail！如果我检查console.log($.fancybox)，我会得到ƒ (){o.open.apply(this,arguments)}这是正确的。我需要看看我还做错了什么。谢谢！ - Jaditpol

Answer 3

我也曾遇到类似的问题，并发现你可以通过在webpack.config中使用ProvidePlugin，让Webpack自动加载模块，从而根据需要将它们提供给各种插件。Webpack的文档涵盖了裸露的$或jQuery实例...

webpack.config.js

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery'
        } )
    ]
};

但是，正如metaskopia所发现的那样，Fancybox需要window.jQuery。为此，以下方法有效：

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        } )
    ]
};

- Ito Pizarro

---

谢谢@ItoPizarro，太棒了！ - Jaditpol

Answer 4

这是我的设置

1）安装Fancybox NPM

npm install @fancyapps/fancybox --save-dev

2) 初始化Fancybox

// Require jQuery (Fancybox dependency)
window.$ = window.jQuery = require('jquery');

// Fancybox
const fancybox = require('@fancyapps/fancybox');
// Fancybox Stylesheet
const fancyboxCSS = require('!style!css!@fancyapps/fancybox/dist/jquery.fancybox.css');

3) 选择使用 Fancybox 打开的元素

要将 Fancybox 附加到图像，您需要在元素中添加属性 [data-fancybox="optional-gallary-identifier"]。

您可以通过 HTML 或 jQuery 手动执行此操作。以下是两种使用 jQuery 完成此操作的方法。

打开所有图像使用 Fancybox（a > img）

$(document).ready(function() {
  $('.lightbox a > img').parent().attr('data-fancybox');
});

将图片通过.lightbox包装器分组成图库

$(document).ready(function() {
  $('.lightbox').each(function(i) {
    $(this).find('a > img').parent().attr('data-fancybox', 'group-' + i);
  });
});

如果您有任何动态加载的内容，例如ajax，则需要将data-fancybox属性应用于动态加载的元素。

- Timofey Drozhzhin