私自身のライブラリをインポートしています：Uncaught ReferenceError：mylibが定義されていません

私のプロジェクトにインポートする小さなライブラリを書く方法を学ぼうとしています。バンドルにWebpackを使用しています。私は私のクラスの新しいインスタンスを作成しようとするまで私自身のライブラリをインポートしています：Uncaught ReferenceError：mylibが定義されていません

すべてが正常である：

Uncaught ReferenceError: mylib is not defined

マイライブラリ：

class mylib { 
    constructor(input) { 
    this.sayHello(input) 
    } 

    sayHello(name) { 
    console.log('Hello ' + name); 
    } 
}

WebPACKの設定：

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    filename: './mylib.js', 
    path: __dirname + '/dist' 
    }, 
    resolve: { 
    extensions: [".js"] 
    } 
};

Index.htmlと：

<script type="text/javascript" src="dist/mylib.js"></script> 
<script> 
    (function() { 
    var test = new mylib('myname'); 
    })(); 
</script> 
<body> 
<pre>...</pre> 
</body>

私はちょうど私が他の場所でライブラリを使用することができるようにすると考えることができるすべてについて試してみたが、何も助けていない...

はどこ私はそれが間違っているのでしょうか？

出典

2017-07-19 mottosson

webpackを使用する場合は、ライブラリからクラスを使用するためにimport/exportを使用する必要があります。クラスはグローバルにアクセスすることはできません（少なくともデフォルトではありません）。

あなたはグローバルとにかく、このクラスを使用する場合は、あなたがあなたのWebPACKの設定には、このような何かを追加する必要があります（https://webpack.github.io/docs/library-and-externals.htmlに見られるように）

output: { 
    // export itself to a global var 
    libraryTarget: "var", 
    // name of the global var: "mylib" 
    library: "mylib" 
}

しかし、私は別のファイルにlibが輸入推薦しますかプロジェクトでは、HTMLファイル自体に記述するのではなく、webpackを使用します。

いずれにせよ、あなたのindex.jsファイルへのエクスポートのデフォルトを追加することを忘れないでください：

export default mylib;

出典

2017-07-19 20:56:17 dejakob

私自身のライブラリをインポートしています：Uncaught ReferenceError：mylibが定義されていません

答えて

関連する問題