Resolving Export/Import

Question

Ich habe einen Namespacing.js mit so etwas wie die folgenden

(function(){ 

    window.GlobalObject = { 
     foo : function() { console.log("bar"); } 
    } 

})(); 

Dann habe ich eine andere MyScript.js

GlobalObject.newAttribute = { ... } 

Also bin ich jetzt mit webpack Bündelung und ich war tryng, Module dafür zu verwenden, aber ich konnte es nicht schaffen.

Bei Namespacing.js i am Ende hinzugefügt:

export default GlobalObject; 

Dann tryed ich es in MyScript.js

import GlobalObject from "Namespacing" 

Aber dann meinem webpack bekommt mir einen Fehler

[14:58:44] GulpUglifyError: unable to minify JavaScript 
Caused by: SyntaxError: Unexpected token: name (Kneat) (line: 1, col: 7, pos: 7) 

zu importieren

Kennt any1 eine gute Möglichkeit, diesen Export/Import durchzuführen?

Answer 1

Um zu import/export zu wechseln, können Sie nicht einfach exports zu Ihren vorhandenen Dateien hinzufügen, Sie müssen ihre Struktur ändern (ganz leicht).

Zum Beispiel würde Namespacing.js entweder:

export const GlobalObject = { 
    foo : function() { console.log("bar"); } 
}; 

... ein benanntes Symbol GlobalObject zu exportieren. Das wäre wie folgt eingeführt werden:

import { GlobalObject } from './Namespacing.js'; 

(Sie könnten eine as Klausel verwenden, wenn Sie einen anderen Namen lokal im Importmodul wollen.)

Oder Sie könnten das Objekt als Standard Export exportieren :

export default { 
    foo : function() { console.log("bar"); } 
}; 

... und es so importieren:

import GlobalObject from './Namespacing.js'; 

Beachten Sie, dass Sie in diesem Fall einen beliebigen Namen für GlobalObject in dem Modul verwenden können, in dem Sie ihn importieren (keine Notwendigkeit als as -Klausel).

---

Mach dir keine Sorgen über die Tatsache, dass es die Entfernung der IIFE beinhaltet; Module sind inhärent beschränkt, Modulcode wird nicht global ausgeführt.