18

Sto provando ad interfacciare ActionScript con JavaScript usando ExternalInterface e webpack.Come accedere all'oggetto globale (finestra) usando il webpack?

ExternalInterface può solo provocare (call) le funzioni trovate sull'oggetto globale (window). Come posso ottenere un riferimento del modulo webpack su window (oggetto globale)?

Mi permetta di elaborare alcuni, voglio avere uno spazio dei nomi per l'azienda (window.companyName) con un'interfaccia per ExternalInterface:

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

L'ActionScript sarà guidare la mia JavaScript. La domanda più fondamentale è: come posso impostare globals usando il webpack in modo che possano vederli ExternalInterface (preferibilmente come esportazioni di un modulo)?

Ho provato a utilizzare expose-loader, exports-loaderimports-loader senza fortuna. expose-loader è idealmente quello di cui ho bisogno, ma non sembra funzionare. Quando imposto window.companyName nei miei moduli e provo a verificarlo nella mia console di Chrome, il risultato è undefined.

+0

Puoi condividere la configurazione del tuo caricatore? –

risposta

1

È do ha accesso a oggetto finestra dallo script Webpacked. Webpack non interferisce con esso poiché la funzione wrapper inserisce solo gli argomenti module, exports e __webpack_require__.

Provare a scrivere uno script con una sola riga per accedere all'oggetto finestra e quindi controllare lo script di output.

Il tuo compito dovrebbe funzionare, a meno che l'esecuzione non lo raggiunga mai o qualche caricatore stia modificando il codice pertinente.

+1

Molti dei file presuppongono che l'oggetto '' this this''' sia puntato su '' 'window'''.Come posso farlo accadere? –

+0

(function() {console.log (this == window);}). Bind (window)(); –

+0

il webpack interferisce. Sto usando i moduli AMD. Quei moduli funzionavano al di fuori del webpack usando 'this' come l'oggetto globale, ma falliscono una volta eseguiti attraverso il webpack. – gman

7

Non stai utilizzando webpack-dev-server?

Perché quando provo il comando webpack, tutto funziona correttamente. Lo sto testando digitando window.mySampleGlobalVariable negli strumenti di sviluppo di Chrome.

MA quando eseguo il comando webpack-dev-server, la variabile della finestra non è definita.

ho questa applicazione di esempio:

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'] 
    } 
}; 
1

Se in esecuzione webpack-dev-server con l'iframe non è possibile accedere alla variabile tramite la console Chrome.

+11

Certo che puoi. Hai solo bisogno di cambiare il contesto della console degli strumenti di sviluppo modificando il menu a discesa predefinito per "". Riferimento: http://stackoverflow.com/a/8581276/188740 –

+0

Mi piacerebbe acquistare un * facepalm *, Pat. – Seth

+1

Bello, grazie @JohnnyOshika – lyjackal