webpackがhtmlでes6クラスをインポートする方法

こんにちは、webpackとES6の新機能です.HTMLでインポートされたクラスにアクセスしようとしています。私はそれにindex.jsインポートされたクラスがあります。webpackがhtmlでes6クラスをインポートする方法

import one from './src/one.js'; 
import two from './src/two.js'; 
import three from './src/three.js'; 

export { 
    one, 
    two, 
    three 
}

in index.html私はクラスにアクセスしようとしています。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script src="bundle.js"></script> 
</head> 
<body> 
<script> 
    let oneObj = new one(); 
</script> 
</body> 
</html>

「1つは定義されていません」というエラーが表示されます。どうすればhtmlのクラスにアクセスできますか教えてください。

出典

2017-02-06 Noor Fathima

これは意図した用途ではないため、expose-loaderを使用して特別な処理が必要です。

モジュール・バンドラのアイデアは、すべてのJavaScriptを（それ以外のコードがある以外は）実行することです。

import {one} from './lib.js'; 
let oneObj = new one();

設定]のWebPACKをエントリファイルとして./app.jsを使用し、最終的にあなたのindex.htmlからインラインスクリプトを削除するには：だからあなたはexport {one, two, three}でコーディングするときapp.jsでそれを使用し、lib.jsです。

出典

2017-02-06 20:20:25 simon04

お返事ありがとうございます。 app.jsでは "oneObj"を使用できますが、index.htmlにoneObjを使用したい –

webpack（例：https://stackoverflow.com/a/34361312/2043830）の設定方法はありますが、動作させることができませんでした。

代わりにグローバルウィンドウオブジェクトを使用して、私がindex.htmlに公開したいものを格納します。

たとえば、あなたのindex.jsにあなたが行うことができます：

window.exported = {one, two, three}; 
//or window.one = one; window.two = two ... etc

を次に、あなたのindex.htmlに：

<script> 
let oneObj = new window.exported.one(); 
//or let oneObj = new window.one(); ... etc 
</script>

私はこのことができます願っています。

出典

2017-08-11 02:38:58

webpackがhtmlでes6クラスをインポートする方法

答えて

関連する問題