web-dev-qa-db-fra.com

Comment accéder à l'objet global (fenêtre) à l'aide de Webpack?

J'essaie d'interfacer ActionScript avec JavaScript avec ExternalInterface et webpack.

ExternalInterface ne peut provoquer (call) que des fonctions trouvées sur l'objet global (window). Comment obtenir une référence de module webpack sur window (objet global)?

Permettez-moi d’en élaborer quelques-unes. Je souhaite disposer d’un espace-noms pour la société (window.companyName) avec une interface pour ExternalInterface:

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

Le code ActionScript pilotera mon JavaScript. La question la plus fondamentale est de savoir comment définir des éléments globaux à l'aide de webpack afin que ExternalInterface puisse les voir (de préférence en tant qu'exportations d'un module).

J'ai essayé d'utiliser expose-loader, exports-loaderimports-loader sans succès. expose-loaderest idéalement ce dont j'ai besoin, mais ne semble pas fonctionner. Lorsque je définis window.companyName dans mes modules et que j'essaie de le vérifier dans ma console Chrome, il en résulte undefined.

javascriptactionscript-3global-variablesexternalinterfacewebpack
18
user2072912

N'utilisez-vous pas webpack-dev-server?

Parce que quand j'essaie webpack command tout fonctionne bien. Je le teste en tapant window.mySampleGlobalVariable dans les outils de développement de Chrome.

MAISlorsque je lance la commande webpack-dev-server, ma variable window est indéfinie.

J'ai cet exemple d'application:

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

Vous do _ avez accès à l'objet window à partir de votre script webpacked. Webpack n'interfère pas avec cela puisque la fonction wrapper n'injecte que les arguments module, exports et __webpack_require__.

Essayez d’écrire un script avec une seule ligne d’objet fenêtre, puis extrayez le script de sortie.

Votre affectation devrait fonctionner, sauf si l'exécution ne l'atteint jamais ou si un chargeur modifie le code approprié.

1
Ricardo Stuven

Si vous exécutez webpack-dev-server avec l'iframe, vous ne pourrez pas accéder à la variable via la console Chrome.

1
Fabian Zeindl