WebPackにバンドルされている関数にアクセスできません

WebPackはJavaScriptをさまざまなhtmlページで使用されるbundle.jsファイルにバンドルする非常に簡単なwebappを持っています。WebPackにバンドルされている関数にアクセスできません

残念ながら、webpack設定ファイルでスクリプトタグで使用できるスタンドアロンライブラリ（libraryTargetおよびlibrary）として使用することを指定しても、動作しません。私の機能が利用できないように、すべてがモジュールにカプセル化されているようです。

index.htmlを

<!DOCTYPE html> 
<html lang="EN"> 
<head> 
    <title>Play! Webpack</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
    <body> 
    <app> 
     Loading... 
    </app> 
    <script type="text/javascript" src="/bundles/bundle.js" charset="utf-8"></script> 
    <button type="button" onclick="ui.helloWorld()">Click Me!</button> 
    </body> 
</html>

私webpack.base.config.jsのエントリと出力部

entry: [ 
     './app/main.js' 
    ], 
    output: { 
     path: buildPath, 
     filename: 'bundle.js', 
     sourceMapFilename: "bundle.map", 
     publicPath: '/bundles/', 
     libraryTarget: 'var', 
     library: 'ui' 
    },

main.js（エントリポイント）

function helloWorld() { 
    alert('Hello, world!'); 
}

私のボタンをクリックすると、私はコンソールにこのエラーが表示されます。

var ui = ... 

(stuff here) 

function(module, exports, __webpack_require__) { 

    __webpack_require__(79); 

    function helloWorld() { 
     alert('Hello, world!'); 
    } 

/***/ }

出典

2017-04-07 Jean-François Côté

uiオブジェクト：

Uncaught TypeError: ui.helloWorld is not a function 
    at HTMLButtonElement.onclick (localhost/:14)

additionnal情報については、私のbundle.jsファイルの内容は、そのようなものになりますバンドルされたライブラリによってエクスポートされるのは、エントリポイントモジュールのエクスポートされたオブジェクトと同じです。 webpack内のモジュールから関数を明示的にエクスポートしないと、そのモジュールのスコープ内でのみ定義されます（JavaScriptモジュールの主な機能の1つです）。

/** main.js **/ 

function helloWorld() { 
    alert('Hello, world!'); 
} 

// module.exports here (in the entrypoint module) is the same object 
// as ui in the page's scope (outside webpack) 
module.exports = { 
    helloWord: helloWorld, 
};

は、その後、あなたの他のスクリプトからアクセスすることができます：

<script> 
    ui.helloWorld(); // 'ui.helloWorld' is the same as 
        // 'module.exports.helloWorld' above 
</script>

を明示的にない場合は、モジュールの外部からアクセスできるようにするmodule.exportsオブジェクトに割り当てる必要がありますエントリポイントモジュールにmodule.exportsと設定すると、デフォルトで空のオブジェクト{ }になります。

出典

2017-04-07 19:33:46 Frxstrem

大規模な関数ライブラリ（他の人が管理している可能性があります）を扱う場合、これを手動で（ソースファイル内で）実行することは望ましくありません。すべてをエクスポートするより良い方法はありますか？ –

@ JoshuaSmithそうであれば、すべての関数を 'module.exports.helloWorld = function helloWorld（）{...}'として定義することができます。私が知っている限り、*すべての関数をエクスポートする方法はないので、おそらくそれはあなたが得られる最も近いものです。 – Frxstrem

WebPackにバンドルされている関数にアクセスできません

答えて

関連する問題