web-dev-qa-db-ja.com

webpackを使用してグローバルオブジェクト（ウィンドウ）にアクセスするにはどうすればよいですか？

ExternalInterfaceとwebpackを使用してActionScriptとJavaScriptをインターフェイスしようとしています。

ExternalInterfaceは、グローバルオブジェクト（call）で見つかった（window）関数のみを呼び出すことができます。 window（グローバルオブジェクト）でwebpackモジュール参照を取得するにはどうすればよいですか？

いくつか詳しく説明しますが、ExternalInterfaceのインターフェイスを持つ会社の名前空間（window.companyName）が必要です。

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

ActionScriptがJavaScriptを駆動します。さらに根本的な質問は、ExternalInterfaceが（できればモジュールのエクスポートとして）見えるようにwebpackを使用してグローバルを設定する方法です。

expose-loader、exports-loaderimports-loaderを使用してみましたが、うまくいきませんでした。 expose-loaderは理想的には必要なものですが、機能していないようです。モジュールにwindow.companyNameを設定し、chromeコンソールで確認しようとすると、undefinedになります。

javascriptactionscript-3global-variablesexternalinterfacewebpack
18
user2072912

webpack-dev-serverを使用していませんか？

webpackコマンドを試してみると、すべてがうまく機能しているからです。 chrome開発者ツールでwindow.mySampleGlobalVariableと入力してテストしています。

[〜＃〜] but [〜＃〜]webpack-dev-serverコマンドを実行すると、ウィンドウ変数が未定義になります。

私はこのサンプルアプリを持っています：

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

dowebpackedスクリプトからウィンドウオブジェクトにアクセスできます。ラッパー関数はmodule、exports、および__webpack_require__引数のみを挿入するため、Webpackはこれに干渉しません。

ウィンドウオブジェクトにアクセスする1行のスクリプトを記述してみて、出力スクリプトをチェックアウトします。

実行が決して到達しないか、ローダーが関連するコードを変更しない限り、割り当ては機能するはずです。

1
Ricardo Stuven

Iframeでwebpack-dev-serverを実行している場合、Chromeコンソールを介して変数にアクセスできません。

1
Fabian Zeindl