wake-up-neo.com

Wie kann ich mit Webpack auf das globale Objekt (Fenster) zugreifen?

Ich versuche ActionScript mit JavaScript mithilfe von ExternalInterface und Webpack zu verbinden.

ExternalInterface kann nur Funktionen provozieren (call), die im globalen Objekt (window) gefunden werden. Wie bekomme ich eine Webpack-Modulreferenz auf window (globales Objekt)?

Erlauben Sie mir einiges zu erläutern, ich möchte einen Namensraum für das Unternehmen (window.companyName) mit einer Schnittstelle für ExternalInterface haben:

window.companyName = { isReady: function() { ... },
                       driver1: function() { ... }, 
                       driver2: function() { ... } }

Das ActionScript steuert mein JavaScript. Die grundlegendere Frage ist, wie kann ich Globals mit Webpack so einstellen, dass ExternalInterface sie sehen kann (vorzugsweise als Export eines Moduls)?

Ich habe es mit expose-loader, exports-loaderimports-loader ohne Erfolg versucht. expose-loaderist ideal, was ich brauche, aber es scheint nicht zu funktionieren. Wenn ich window.companyName in meinen Modulen setze und versuche, es in meiner Chrome-Konsole zu überprüfen, führt dies zu undefined.

18
user2072912

Verwenden Sie nicht webpack-dev-server?

Denn wenn ich den Befehl webpack versuche, funktioniert alles einwandfrei. Ich teste es durch Eingabe von window.mySampleGlobalVariable in den Chrome-Entwicklerwerkzeugen.

ABERWenn ich den Befehl webpack-dev-server ausführen, ist meine Fenstervariable nicht definiert.

Ich habe diese Beispielanwendung:

app.js

window.mySampleGlobalVariable = 'TEST';
console.log('App is ready');

index.html

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Webpack test</title>
    </head>

    <body>
        Webpack test
        <script src="bundle.js"></script>
    </body>

</html>

webpack.config.js

var path = require('path');

module.exports = {
    entry: './app.js',
    output: {
        filename: './bundle.js'
    },
    resolve: {
        extensions: ['', '.js']
    }
};
7
machaj

Sie haben do Zugriff auf das Fensterobjekt aus Ihrem webpackten Skript. Webpack stört das nicht, da die Wrapper-Funktion nur die Argumente module, exports und __webpack_require__ Einfügt.

Versuchen Sie, ein Skript mit einer einzelnen Zeile zu schreiben, die auf ein Fensterobjekt zugreift, und überprüfen Sie dann das Ausgabeskript.

Ihre Zuweisung sollte funktionieren, es sei denn, die Ausführung erreicht sie nie oder ein Loader ändert den relevanten Code.

1
Ricardo Stuven

Wenn Sie webpack-dev-server mit dem iframe ausführen, können Sie nicht über die Chrome-Konsole auf die Variable zugreifen.

1
Fabian Zeindl