Importieren von JS Dateien außerhalb Webpack

Question

Also, ich ein Skript, das ein globales Objekt erstellt

(function() { 

    window.GlobalThing = {} 

})(); 

Dieses Skript wird auch dieses Objekt Füllattribute

if (!GlobalThing .Resource) { GlobalThing .Resource = require('./Resource'); } 

Dann einige andere Skripte, die nicht gebündelt sind, Mit Webpack muss dieses GlobalThing verwendet werden. `Ve tryed es global mit ProvidePlugin zum Beispiel zu machen:

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery", 
     'GlobalThing': path.join(__dirname,"Path/GlobalThing.js") 
    }) 
], 

Ich habe auch

resolve: { 
    alias: { 
     'GlobalThing': path.join(__dirname,"Path/GlobalThing.js") 
    } 
} 

Alias ​​tryed hinzugefügt habe ich am Ende meines GlobalThing so etwas wie dieses tryed zu tun. JS-Datei auch:

(function(){ 
    window.GlobalThing = GlobalThing; 
})(); 

Dann i importieren musste das Skript auszuführen, so bekam ich eine zufällige js-Datei im webpack es zu testen:

import GlobalThing from "GlobalThing "; 

Immer noch scheint es, einige Skripts können nicht die see GlobalThing. Wenn ich alles mit Webpack bündle, funktioniert es, aber ich wollte nicht, weil unsere App sehr alt ist und einige sehr alte Sachen hat. Gibt es eine Möglichkeit, GlobalThing diesen älteren Skripten zugänglich zu machen?

Answer 1

ProvidePlugin nimmt einen Modulnamen (d. H. Zeichenfolge) und intern verwendet require, um es zu laden. Das hilft dir nicht beim Laden deines eigenen Skripts.

Das heißt, sollten folgende Arbeiten:

• das GlobalThing Skript halten webpack aus
• Stellen Sie sicher, das Skript selbst kopiert wird in den Ausgabeordner
• Stellen Sie sicher, die index.html (oder was auch immer html Bündelung Seite, die Sie verwenden) hat die Skripte in der Reihenfolge GlobalThingScript.jsgefolgt von webpack bundle.js

Um Ihnen mehr Einblick zu geben: Wenn Webpack die Skripte anders als GlobalThingScript.js bündelt, weiß es nicht einmal, dass es etwas gibt, das GlobalThing genannt wird. Es bündelt nur die anderen Dateien.

Das würde bedeuten, dass es Ihnen obliegt, dafür zu sorgen, dass der GlobalThingScript.js es auch zum endgültigen output Ordner gemacht wird. Außerdem sollte die HTML-Quelle <script> Tags verwenden, um die GlobalThingScript.jsvor webpack bundle.js einzuschließen.

Falls das Problem weiterhin besteht, bearbeiten Sie bitte das OP, um die HTML-Quelle einzuschließen.

Hoffe, dass hilft.