Webpack et des bibliothèques externes

Je suis en train de sortir webpack (http://webpack.github.io/) et il à l'air vraiment sympa, cependant je suis un peu coincé ici.

Dire que je suis en utilisant un CDN pour une bibliothèque, le f.ex jQuery. Ensuite dans mon code, je veux le require('jquery') de pointe automatiquement vers le mondial jquery exemple, au lieu d'essayer de l'inclure à partir de mes modules.

J'ai essayé d'utiliser les plugins comme la IgnorePlugin:

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

Cela fonctionne pour ignorer la bibliothèque, mais il dit encore que le module requis est manquant", quand je lance le webpacker.

De toute façon je besoin de dire webpack que jquery doit être pris dans le contexte global de la place. Semble comme sur un cas d'utilisation, donc je suis un peu surpris de voir que les docs ne cible pas spécifiquement.

InformationsquelleAutor David Hellsing | 2014-03-20
  1. 72

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

    L'exemple sur cette page illustre vraiment bien, à l'aide de jQuery. En un mot, vous pouvez avoir besoin de jQuery dans les conditions normales de CommonJS style:

    var jQuery = require('jquery');

    Puis, dans votre config objet, utilisez la externals propriété de la carte du module jQuery pour le mondial jQuery variable:

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

    L'résultant module créé par Webpack aurez simplement à l'exportation existants variable globale (je pars beaucoup de choses ici par souci de concision):

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

    Je l'ai essayé et il fonctionne exactement comme décrit.

    • Juste essayé cela avec l'UMD de sortie, et il ne fonctionne pas. Au lieu de cela, il génère du code qui n'require('jQuery'), qui échoue parce que le nom du module 'jquery', pas 'jQuery'. Je ne comprends pas comment cette fonctionnalité est censé fonctionner.
    • J'ai eu le même problème, je suis en utilisant ES6 modules. Même si j'écris import React from 'react';, les externes sont tout simplement configuré comme externals: { 'react': 'react' }
    • Pour UMD, vous devez passer dans un objet qui donne une autre chaîne pour chaque type de module. E. g. { amd: 'jquery', global: 'jQuery', commonjs: 'jquery' } les propriétés exactes il y a sans doute tort, mais il devrait être un bon filon pour quiconque d'obtenir ce droit dans l'avenir.
    • Wow, il est possible d'avoir UMD utiliser des noms différents comme @Adam A dit, mais les propriétés sont les suivantes: amd, commonjs, commonjs2, et root! De cette façon, vous pouvez faire: externals: {jquery: {amd 'jquery', root: '$', commonjs: 'jquery', commonjs2: 'jquery'}}
    • c'est cool de syntaxe, mais j'espérais que je pourrais faire quelque chose comme ceci externals: {jquery: {commonjs2: 'global.jQuery'}}, mais qui a malheureusement toujours des résultats dans un module.exports = require('global.jQuery'); où je suis simplement à la recherche pour le non-commonjs comportement de module.exports = global.jQuery; dans un commonjs2 cible de construire. Toutes les idées, j'ai essayé le NormalModuleReplacementPlugin à pas de chance
    • comment à propos de secours. Est-il un simple/la meilleure façon pour que avec webpack?

    InformationsquelleAutor Garrett