2016-04-22 14 views
2

Ich habe folgendes in meiner package.json Datei:Browserify Shim scheint nicht Tether zu Fensterobjekt zu befestigen

"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
}, 
"browser": { 
    "jquery": "./node_modules/jquery/dist/jquery.js", 
    "tether": "./node_modules/tether/dist/tether.js" 
}, 
"browserify-shim": { 
    "jquery": "$", 
    "tether": "Tether" 
} 

Und dann diese in einem meiner JS Module:

const $ = require('jquery'); 
const Tether = require('tether'); 

ich erhalte dann die folgende Fehlermeldung im Browser:

tether.min.js:1 Uncaught TypeError: Cannot set property 'Tether' of undefined

Allerdings, wenn ich nicht Tether versuchen zu Shim und verwenden nur window.Tether das Modul, das es erfordert, funktioniert gut.

const $ = require('jquery'); 
window.Tether = require('tether'); 

Weiß jemand, warum der browserify-Shim nicht für Tether auf diese Weise funktionieren würde?

+0

Übrigens müssen Sie die 'browser' Direktive für keine dieser Dateien verwenden, da der Pfad durch die' main' Direktive in ihren jeweiligen 'package.json' Dateien festgelegt wird. – YPCrumble

+0

Ja, ich wusste, dass ich sie direkt von node_modules anfordern könnte (über ihre eigenen Paketdateien wie du sagst). Der Grund, warum ich die Shim für diese benutzte, war, weil ich dachte, dass sie sie dem globalen "Fenster" aussetzte. – davidpauljunior

+1

Die 'browser' Direktive dient nur dazu, einen Alias ​​zur Verfügung zu stellen, um die Datei, die Browserify verwendet, zu überschreiben, siehe https://github.com/substack/node-browserify#browser-field, das Teil des Browserify-Kerns ist. Ich denke, Ihre Methode, 'window.Tether' zu verwenden, ist korrekt, wenn Sie möchten, dass' Tether' für den Rest Ihrer App global verfügbar ist. Eine andere Möglichkeit besteht darin, Tether über CDN zu ziehen, wenn diese verfügbar ist, und die Einstellung ['global'] (https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global) zu verwenden, um davon abzuziehen das vorhandene 'Fenster', anstatt den Code wieder in Ihr Paket aufzunehmen. – YPCrumble

Antwort

2

Sie sind richtig - Sie müssen das Objekt window manuell aus Ihrem Bundle angeben.

Ich bin nicht 100% sicher, aber mein Verständnis ist, dass this part of the documentation, wenn sie sagt,

x exports window.$

eigentlich bedeutet, dass $ auf alle Module innerhalb des Bündels als $ verfügbar ist - das bedeutet nicht, das window Objekt Ihrer Webanwendung.

Siehe zum Beispiel .

Das Problem ist in dem Teil der Dokumentation, in dem die Leute glauben, das Objekt sollte Teil der window sein - könnte eine gute Idee sein, den Wortlaut davon zu ändern.

+0

Ich finde die Dokumente wirklich nicht klar, was sie mit "Fenster" meinen. Das scheint die Ursache aller Probleme zu sein. Ich nehme an, dass ich meine Anforderungen von innerhalb der Module wollte, um nicht zu zeigen, dass sie an das Fenster angeschlossen waren. Dies kann wahrscheinlich in einer Config irgendwo getan werden. Vielen Dank! – davidpauljunior

+0

Ja - gerade hinzugefügt ein [Problem] (https://github.com/thlorenz/browserify-shim/issues/210) wird die Dokumentation für diesen Teil verbessern. – YPCrumble

Verwandte Themen