jQuery und es6 Importe - wie bekomme ich eine globale Instanz

Ich benutze Webpack, um meine Dateien zu bündeln, habe aber ein Problem mit jQuery. Aufgrund des Legacy-Codes haben wir eine ganze Reihe von Funktionen für das jQuery-Objekt bei der Seiteninitialisierung definiert. Das Problem wir sehen, wenn Sie einejQuery und es6 Importe - wie bekomme ich eine globale Instanz

import $ from 'jquery'

tun Jede Datei wird immer eine eigene Instanz von jQuery ist. In unserem webpack.config, haben wir versucht, die ProvidePlugin für das Einrichten eines globalen Namensraum jquery wie so zu verwenden:

new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery" 
})

Leider, das ist nicht wirklich "global" ist. Das bedeutet, dass alle Änderungen, die wir an dieser Instanz in einer Datei vornehmen, nicht für die anderen Dateien beibehalten werden. Zum Beispiel:

<-- file one --> 
window.a$ = $; 
$.fn.myPlugin = function() {}; 

<-- file two --> 
window.b$ = $; 

<-- console --> 
window.a$ === window.b$ // is false 
window.b$.myPlugin // is undefined here 
window.a$.myPlugin // is properly set here.

Klar habe ich ein schlechtes Verständnis von Es6 Importe. Was mache ich hier falsch?

Quelle

2016-11-12 gabaum10

* "Natürlich habe ich ein schlechtes Verständnis von Es6 Importe" * ES6 bietet nur das Modul * Syntax * und wie Module bewertet werden sollten (nämlich einmal). Alles andere, Modulauflösung, Laden von Modulen, hängt von der Ausführungsumgebung oder dem Bundler ab (d. H. Webpack in diesem Fall). –

Geben Sie bitte [MCVE] (http://stackoverflow.com/help/mcve) an, das das Problem replizieren kann, das Beispiel ist nicht ausreichend. Es ist nicht einfach, Webpack-Build-Probleme zu replizieren, ein Repo würde wahrscheinlich helfen. Die Annahmen zu 'import' und' ProvidePlugin' sind falsch, in beiden Fällen sollte dies zu einer einzelnen jQuery-Instanz führen. Dies kann passieren, wenn 'jquery' zu verschiedenen Webpack-Bundle-Chunks gehört. – estus

@estus Was meinst du, jquery gehört zu verschiedenen Webpack Bundle Chunks? Können Sie das näher ausführen? In der Zwischenzeit werde ich daran arbeiten, etwas Reproduzierbares zu erstellen. – gabaum10

-1

Dank @estus entdeckte ich das Stück, das mir fehlte. Wie er in seinem Kommentar oben erwähnt hat, habe ich unabsichtlich neue Instanzen von jQuery erstellt, als ich einen Splitpunkt eingerichtet habe.

Ich brauchte die CommonsChunkPlugin zum Einrichten einer Lieferanten-Datei wie so verwenden:

mit dem Anbieter

module.exports = { 
    entry: { 
     vendor: ['jquery'] 
    }, 

     ... 

    plugins: [ 
     new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     "window.$": "jquery" 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 

     // filename: "vendor.js" 
     // (Give the chunk a different name) 

     minChunks: Infinity, 
     // (with more entries, this ensures that no other module 
     // goes into the vendor chunk) 
     }) 
    ] 
    ...

In Verbindung es Plugin die globale jQuery-Instanz Setup recht einfach war.

Quelle

2016-11-14 17:04:54 gabaum10

jQuery und es6 Importe - wie bekomme ich eine globale Instanz

Antwort

Verwandte Themen