如何在 webpack 中使用 fancybox？

Question

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

我已经通过 npm 下载并按照 documentation:

中的说明导入了它

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。

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

这不完全正确——“我已经通过 npm 下载它并按照文档中的说明导入它”。您不必将 require('fancybox')($) 分配给变量，这调用 returns 什么都没有。下面 - 这是来自 docs

的片段

var $ = require('jquery');

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

您可以检查您的 jQuery 对象是否具有 fancybox 方法和 console.log($.fancybox)。如果它 returns 是一个函数，则意味着您已成功将一个 fancybox 包导入到您的代码中。所以你应该去别的地方寻找错误的原因。在这种情况下，请检查您传递给 $.fancybox.open 的对象是否正确。据我所知，这个对象的属性 src 应该包含一个 url 来显示你想要显示的图像或视频。喜欢来自 fancybox 官方网站的this example。

Answer 2

好的。我设法解决了这个问题。

首先，我意识到我安装了 Fancybox 2 instead of 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");

瞧！现在一切正常。

Answer 3

我遇到了同样的问题，发现你可以 webpack automatically load modules — making them available to the various plugins as needed — via ProvidePlugin right in the webpack.config. Webpack's documentation 覆盖裸体 $ 或 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'
        } )
    ]
};

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) Select用Fancybox打开什么元素

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

您可以通过 HTML 或 jQuery 手动执行此操作。 jQuery.

有两种方法可以做到这一点

用Fancybox打开所有图片(a > img)

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

通过 .lightbox wrapper 将图像分组到图库中

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

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

如何在 webpack 中使用 fancybox？

How to use fancybox with webpack?

fancybox

webpack

1) 安装 Fancybox NPM

2) 初始化 Fancybox

3) Select用Fancybox打开什么元素