jQueryプラグインとは

jquery プラグイン/作成
こちらの記事を参照して頂ければと思います。
jQuery撲滅運動支持者の僕としては、こんなコード書きたくないっす見たくないっす！。

要はjQueryを使用せずともブラウザJSで値を設定して、その値を元にコードが動けばいいわけです。
jQueryなんて使用せずに簡単に作れる！ｗｗｗそう思っていて時期も僕にはありました。

動くと思っていたコードが動かない

さて、jQueryプラグインちっくな物を作成しだした僕ですが、当初こんなコードを記述しました。

index.js

'use strict';

class Index{
    hello(str) {
        console.log(str);
    }
}

module.exports = Index;

これをbabel+browserifyでES6→ES5へ変換し、「app.js」を作成します。
そのjsファイルを読み込み、下記のようなコードを記述しました。

index.html

<html>
<head>
    <title>TestApp</title>
</head>
<body>
    <script type="text/javascript" src="./dist/app.js"></script>
    <script type="text/javascript">
        var index = new Index();
        index.hello("testaaaaaaa");
    </script>
</body>
</html>

めっちゃ動きそうですね。ただ、これ「Index is not defined(…)」でエラーになります。
ブラウザjsでIndexクラスを読み込めないためエラーが発生します。

問題はbrowserify

この問題はbrowserifyでjsファイルを読み出す際は必ず、[require]しないといけないために発生しています。
本来はこう書かなければいけないはずです。

index.html

<html>
<head>
    <title>TestApp</title>
</head>
<body>
    <script type="text/javascript" src="./dist/app.js"></script>
    <script type="text/javascript">
        var Index = require('Index.js');
        var index = new Index();
        index.hello("testaaaaaaa");
    </script>
</body>
</html>

これであれば正しく動きそうです！
ただここで問題があります。
そう、今の各種ブラウザではES6をサポートしていないので[require]構文が存在しません。
よって、この書き方では「require is not defined(…)」でエラーが発生します＼(^o^)／

解決方法

解決方法は3パターンあると思われます。

[手法1]

browserifyを使わない手です。
こうすればrequireを使用しない(使用できない)のでこの問題は発生しないと思います。
ただ、複数ファイルになると管理が面倒になるので、この手は使わないようにしました。
(簡単なプラグインですし、この方法もありっちゃありです。ただ、大きくなるときつくなると思われます。)

[手法2]

2つ目がブラウザJSでrequireをサポートする手です。
これはいろいろ探したのですが良い方法が見つからず断念しました。
(※何か良い方法があれば教えて下さい(´・ω・`))

[手法3]

3つ目が公開するjsファイルだけグローバルにする手です。
今回はこの手法で解決しました。
具体的にはindex.jsをグローバルにする記述を一文加える方法です。

index.js

'use strict';

class Index{
    hello(str) {
        console.log(str);
    }
}

window.Index = Index; //module.exports = Index;からこの文へ変更

こうすることでindex.jsはグローバルとなり、index.htmlのブラウザJSからアクセス出来るようになります。

おわりに

う～ん。何とも嫌な感じですが、今はこれが精一杯な気がします。
できればブラウザJSにrequireを使用できるようにする方法が一番良いと思います。
ただ、ES6は本当に書きやすいし、保守しやすい(これまでのjsと比べて)ので、jQueryを使うこと考えたらこの書き方でも十分ではないかと思っています。(jQueryなんて全部グローバルなわけですしｗ)

ってことで、この手法でこんなものを作ってみました。

gaku3601/image-upload.js
よかったらご活用下さい(´・ω・`)

ES6 + babel + browserifyでjQueryプラグイン的なものを作りたかった