Wie benutze ich fancybox mit webpack?

Question

Ich entwickle gerade eine Webseite und benutze Webpack in meinem Build-Prozess. Ich habe es geschafft, Slick-Carrousel-Plugin über npm heruntergeladen verwenden, kann aber nicht fancybox arbeiten!

ich es über npm heruntergeladen haben und es importiert wie im documentation erklärte:

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

Dann in meinem Code ich versuche, ein fancybox Objekt initailize und nichts passiert. Es wirft überhaupt keine Fehler auf.

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

Wenn ich ein Konsolenprotokoll dieser Variablen bekomme ich:

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

Was bedeutet, Slick-Modul geladen ist richtig, aber nicht fancybox.

Somewhere Ich lese, dass Sie Import-Loader verwenden müssen, um fancybox jquery Variablen erkennen zu lassen. Also habe ich es über Npm heruntergeladen und in meine Datei webpack.config aufgenommen:

Aber es funktioniert auch nicht.

Kann mir jemand ein Licht zu diesem Thema geben? Danke im Voraus!

Answer 1

Ok. Ich habe es geschafft, das Problem so zu lösen.

Zuerst erkannte ich, dass ich installiert Fancybox 2 statt Fancybox 3 so deinstalliert ich die erste und installiert die letzten (Dank @Mikhail Shabrikov dafür, dass ich erkennen, dass!).

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

Zweitens graben ich durch Fancybox Original-Code und sah, dass es jQuery als window.jQuery, um es zu übergeben erfordert und nicht $ so in meinem erfordert ich dies tat:

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

Und voila! Alles funktioniert jetzt.

Answer 2

Dies ist nicht ganz richtig - "Ich habe es über npm heruntergeladen und importiert, wie in der Dokumentation angegeben". Sie müssen keine Variable require('fancybox')($) zuweisen, dieser Aufruf gibt nichts zurück. Unten - es ist ein Schnipsel von docs

var $ = require ('jquery');

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

Sie können überprüfen, ob Ihr jQuery-Objekt fancybox Methode mit console.log($.fancybox) hat. Wenn es eine Funktion zurückgibt, bedeutet das, dass Sie ein fancybox-Paket erfolgreich in Ihren Code importieren. Du solltest also die Ursache des Fehlers an einem anderen Ort suchen. Überprüfen Sie in diesem Fall, ob das Objekt, das Sie an $.fancybox.open übergeben haben, korrekt ist. Wie ich weiß, sollte die Eigenschaft src dieses Objekts eine URL zu Bild oder Video enthalten, was Sie zeigen möchten. Wie in this example von fancybox offiziellen Website.

Answer 3

ich mit dem gleichen Problem gekämpft und festgestellt, dass Sie webpack automatisch laden Module können - sie verfügbar zu den verschiedenen Plugins bei Bedarf zu machen - über ProvidePlugin direkt im webpack.config. Webpack des documentation deckt die nackten $ oder jQuery Instanzen ...

webpack.config.js

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

Aber wie metaskopia gefunden, Fancybox will window.jQuery. Zu diesem Zweck hat Folgendes funktioniert:

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