Webpack en externe bibliotheken

Ik probeer webpack (http://webpack.github.io/) uit en het ziet er erg goed uit, maar ik zit hier een beetje vast.

Stel dat ik een CDN gebruik voor een bibliotheek, f.ex jQuery. Vervolgens wil ik in mijn code dat de require('jquery')automatisch verwijst naar de globale jQuery-instantie, in plaats van te proberen deze uit mijn modules op te nemen.

Ik heb geprobeerd plug-ins te gebruiken zoals de IgnorePlugin:

new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))

Dit werkt voor het negeren van de bibliotheek, maar het zegt nog steeds dat de vereiste module “ontbreekt” wanneer ik de webpacker start.

Op de een of andere manier moet ik webpack vertellen dat jQueryin plaats daarvan uit de globale context moet worden opgehaald. Het lijkt een veelvoorkomend gebruik, dus het verbaast me een beetje dat de documenten hier niet specifiek op zijn gericht.


Antwoord 1, autoriteit 100%

Volgens de Webpack-documentatiekunt u de externalseigenschap op het configuratieobject “om afhankelijkheden voor uw bibliotheek op te geven die niet worden opgelost door webpack, maar afhankelijkheden worden van de uitvoer. Dit betekent dat ze tijdens runtime [sic] uit de omgeving worden geïmporteerd.”

Het voorbeeld op die pagina illustreert het heel goed met jQuery. In een notendop, u kunt jQuery nodig hebben in de normale CommonJS-stijl:

var jQuery = require('jquery');

Gebruik vervolgens in uw configuratieobject de eigenschap externalsom de jQuery-module toe te wijzen aan de algemene jQuery-variabele:

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

De resulterende module gemaakt door Webpack zal eenvoudig de bestaande globale variabele exporteren (ik laat hier veel dingen weg voor de beknoptheid):

{
    1: function(...) {
        module.exports = jQuery;
    }
}

Ik heb dit uitgeprobeerd en het werkt precies zoals beschreven.

Other episodes