2
ブラウザからwebpackバンドルライブラリにアクセスできません。ブラウザでwebpackバンドルライブラリにアクセスする
例：私はクラスFoo
// foo.js
"use strict";
export default class Foo {
constructor() {
var bar = "bar";
}
}
FooはWebPACKのコンフィグは次のようになりますsrc.js
// src.js
"use strict";
import Foo from "./foo.js";
にインポートされています。エントリはsrc.js、出力ファイルはbundle.jsです。
// webpack.config.js
module.exports = {
entry: './src.js',
output: {
path: '.',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
]
},
};
ウェブパックはすべて正常にコンパイルされ、HTMLファイルにロードできます。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<script src="bundle.js"></script>
<script type="text/javascript">
var x = new Foo();
console.log(x);
</script>
</head>
<body>
</body>
</html>
エラーが発生しています。何らかの理由で、バンドルされたJSは、ブラウザがアクセスできる名前空間にFooクラスを入れません。
これは私がFirefoxで取得エラーです：
ReferenceError: Foo is not defined[Learn More]
私はgrokkingないよWebPACKの中にいくつかの設定があります、私はそれを確信しているが、私は、これまでにできていませんでしたそれを理解する。
これは仕様です。 – Claies
@Claiesバンドルに含めるクラスにアクセスできないように設計されていますか？次に、ウェブパックのポイントは何ですか？ – samullen
厳密なモードを使用している場合は、オブジェクトがインポートされたモジュールにスコープされるのが設計上の問題です。あなたの 'srcにインポートします。js'はHTMLのスクリプトと同じスコープではありません。なぜなら、そのスクリプトは1）厳密なモードではなく* 2）グローバルな名前空間にバインドされているからです。 – Claies