javascriptのバンドルツールで詰まった

フロントエンドを簡単に作成しようとフレームワーク無しで簡単なサイト構築をしていたら、
js のバンドルで詰まったのでメモ。

目次

何で詰まったか

例えば以下のようにボタンに onclick に関数を割り当てた html ファイルを作成したとする。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<!--省略-->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<!--省略-->
<button id="test" onclick="test()">TEST</button>
<!--省略-->
</body>
</html>

この時onclickに割り当てたtest()が src.js に定義されている

src.js
1
2
3
4
5
6
7
8
9
"use strict";

const Lib = require("./lib.js");
let lib = new Lib();

function test() {
console.log(`test`);
lib.func();
}

このsrc.jsは、Webpack + babel で app.js にバンドルする。

実行

動かない!

コンソールを見たら
「Uncaught ReferenceError: test is not defined」

えっ、なんで?!!


というわけで調べた

webpack + babel でバンドルされた app.js の中を見ると、確かにtest()の定義自体はある。
しかし、test()の定義が、即時関数に包まれて evel()で実行される状態に

app.js(webpack + babel)
1
2
3
4
5
6
7
8
9
(function (modules) {
// webpackBootstrap
/*省略*/
eval(
'\n\nvar Lib = __webpack_require__(/*! ./lib.js */ "./src/lib.js");\n\nvar lib = new Lib();\n\nfunction test() {\n console.log("test");\n lib.func();\n}\n\n//# sourceURL=webpack:///./src/index.js?'
);

/*省略*/
});

Browserify でバンドルした app.js だと次のようになる。
こっちも即時関数に包まれる

app.js(Browserify)
1
2
3
4
5
6
7
8
9
(function () {
/*省略*/

function test() {
console.log(`test`)
lib.func()
}
/*省略*/
);

この点について説明されているサイトが有った。
ブックマークし忘れて、見つけられなくなってしまった。

この状態だと、グローバル空間に関数の定義が無いので html 側で、関数の割り当てしても見つからないそうだ。
グローバル空間に関数が露出しない(この表現でいいのか?)らしい。

実際、html で src.js を参照させて実行すると関数自体は見つかる。(もちろんそのままではエラーだけど)

こういう場合以下のように変更する必要があった。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<!--省略-->
</head>
<body>
<!--省略-->
<button id="test">TEST</button>
<!--省略-->
<script type="text/javascript" src="app.js"></script>
</body>
</html>
src.js
1
2
3
4
5
6
7
8
9
10
11
"use strict";

const Lib = require("./lib.js");
let lib = new Lib();

function test() {
console.log(`test`);
lib.func();
}

document.getElementById("test").onclick = test;

javascript の処理として、イベント割り当てをすればうまくいった。
この場合は、変換後に即時関数に包まれていても大丈夫。

それでも html 側で関数割り当てをしようと思ったら

バンドルをやめる方法しか見つからなかった。
もう一件方法を見つけたのでそれは後述。

今回やりたかったのは、class とかアロー関数とかの新しい構文の利用だったから、 babel だけ使うことにした。
バンドルをやめたので、別ファイルに書いてインポートしていたクラス定義も src.js に書くことになった。

src.js は以下のように書き変えた。

src.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use strict";

class Lib {
constructor() {}
func() {
console.log("Lib.js");
}
}
let lib = new Lib();

function test() {
console.log(`test`);
lib.func();
}

これが、babel で変換すると次のようになった。

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"use strict";

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}

function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}

var Lib =
/*#__PURE__*/
(function () {
function Lib() {
_classCallCheck(this, Lib);
}

_createClass(Lib, [
{
key: "func",
value: function func() {
console.log("Lib.js");
},
},
]);

return Lib;
})();

var lib = new Lib();

function test() {
console.log("test");
lib.func();
}

この babel で変換しただけの app.js を変更前の index.html で読み込むと、
ボタンを押して関数test()が実行できる。

今回の件で js のバンドルについて自身の理解が足りていないことに気がつけた。
vue-cli での webpack 利用とか、使ってる気で使われているなと・・・。
反省

今回 webpack もしくは Browserify でのバンドルをやめるという方法しか取れなかったけど、
他に方法がないのが気になった。

2/10 追記 もう一つ方法を見つけた

LCL Engineers’ Blog - ES5 から Webpack 管理下の関数を呼び出す方法
に記載があった。

グローバル空間に関数登録をしてしまう方法になる。

以下のように作った関数 test()を、window.test = testでグローバル空間に関連付けする。

src.js
1
2
3
4
5
6
7
8
9
10
11
"use strict";

const Lib = require("./lib.js");
let lib = new Lib();

function test() {
console.log(`test`);
lib.func();
}

window.test = test;

この src.js を webpack + babel で処理した app.js なら、
以下の html 側でイベントへの関数割り当てした場合も動作する。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<!--省略-->
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<!--省略-->
<button id="test" onclick="test()">TEST</button>
<!--省略-->
</body>
</html>

LCL Engineers’ Blog - ES5 から Webpack 管理下の関数を呼び出す方法
にも

グローバルに露出させるのであまりよくないかもしれませんが

とあるけど変数・関数の名前がぶつかる危険性など考えると、
安全性が担保できないのだろうなと。
少なくとも test とか使ってそうな名前でやるのは避けたほうがよさそうだ。