webpack環境で関数をコンソールで実行したところエラーが返る

Question

function test(hoge) {
  console.log(hoge)
}

test("fuga")

上記をHTMLでjsを読み込みファイルを分けてコンソールで関数を実行すると正確に結果が返ってきますが、webpack（拡張子が.vue）で実行したところエラーが返ってきます。こちらは何故なのでしょうか？初歩的な質問で申し訳ないのですがご教授願います。

Comments

[Bremenkanp]

webpackの設定や、エラーの詳細などお願いします。

[span]

申しわけありませんwebpackの設定というのがよく分かっていないのですがVue CLIを使用しローカルサーバを立ててブラウザで確認しております。
エラーの詳細は test is not defined と返ってきます。

Answer 1

これはtest.jsが存在していて、

<script src="test.js">という風に実行した時はグローバルスコープにtest関数が追加されているが、 Webpackを使ってbundle.jsにコンパイル後、<script src="bundle.js">として読み込ませたらtest関数がグローバルスコープに無いじゃないか！！ …という現象を指していますか？ もしそうならば、これはそういう仕様です。 JavaScriptは一番外側の変数スコープはグローバル変数領域であり、 ここに宣言した変数や関数はコンソールでも使えます。 しかし、1個でも関数宣言を行いますと、 その関数内ではスコープが区切られてしまい、その中で変数や関数宣言を行うとグローバル変数領域からは参照出来ない仕様になっています。 --- Webpackは複数のスクリプトファイルを1個のファイルに統合させる為、 スクリプトファイルを流し込むみたいな事をやっているはずなので、 各スクリプトの変数領域が混ざって誤作動の原因にならないよう、いたる所で関数を宣言してスコープで区切っている仕様になっているはずです。 関数が1個でも宣言され、 その中で変数や関数を宣言してもグローバル変数領域には影響されないんでしたね。 念の為一度デベロッパーツールを開いてbundle.jsの中身を開いてみてはどうでしょうか？ 多分いたる所で関数宣言で括りまくっていると思います。 その結果`function test(){}`も何らかの関数内で実行される事になる為、グローバル変数領域に届かなくなってしまっているかと考えられます。 --- どうしてもということであればそうですね… 下記のコードのようにグローバルスコープのプロパティに関数を流し込めば使えるようになるんじゃないかと思います。 お試しあれ。 ```JavaScript function test () { console.log('test'); } window.test = test; ```

Comments

[span]

ご回答ありがとうございます！コンパイルの段階でスコープが区切られてしまうということで納得いたしました。