web-dev-qa-db-fra.com

Webpack et bibliothèques externes

J'essaie webpack ( http://webpack.github.io/ ) et ça a l'air vraiment sympa, mais je suis un peu coincé ici.

Supposons que j'utilise un CDN pour une bibliothèque, f.ex jQuery. Ensuite, dans mon code, je souhaite que la require('jquery') pointe automatiquement sur l'instance globale de jquery, au lieu d'essayer de l'inclure à partir de mes modules.

J'ai essayé d'utiliser des plugins comme le IgnorePlugin:

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

Cela fonctionne pour ignorer la bibliothèque, mais il indique toujours que le module requis est "manquant" lorsque j'exécute l'installateur Web.

D'une manière ou d'une autre, j'ai besoin de dire à Webpack que jquery devrait plutôt être récupéré dans le contexte global. Cela ressemble à un cas d’usage courant, alors je suis un peu surpris que la documentation ne le cible pas spécifiquement.

javascriptrequirecommonjswebpack
47
David Hellsing

Selon la documentation Webpack , vous pouvez utiliser la propriété externals de l’objet config "pour spécifier les dépendances de votre bibliothèque qui ne sont pas résolues par webpack, mais deviennent des dépendances de la sortie. signifie qu'ils sont importés de l'environnement en cours d'exécution [sic]. "

L'exemple sur cette page l'illustre très bien, en utilisant jQuery. En résumé, vous pouvez avoir besoin de jQuery dans le style CommonJS habituel:

var jQuery = require('jquery');

Ensuite, dans votre objet config, utilisez la propriété externals pour mapper le module jQuery à la variable globale jQuery:

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

Le module résultant créé par Webpack exportera simplement la variable globale existante (je laisse ici beaucoup de choses pour des raisons de concision):

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

J'ai essayé ceci, et cela fonctionne comme décrit.

72
Garrett