ES.Next版jQueryプラグインボイラープレート

ES.Next版jQueryプラグインボイラープレート

ES.Next版jQueryプラグインボイラープレート

BabelやBubleを使い始めて「脱jQueryをそろそろ。。。」と考えつつも、いきなりはしんどいので、自作jQueryプラグインのES.Next化から始める人のための記事です。

既存のボイラープレートを書き換え

prototypeを使ってClassっぽい書き方ができていた、jquery.highly-configurable.plugin.boilerplate.jsを本当のClassに書き換えてみます。

プラグインの作成

用意するファイルは2つです。スムーススクロールの jQuery プラグインを npm にあげるようにしました – モンキーレンチで紹介されているプラグインの構成を参考にしてます。

用意するファイルと構成

  • _plugin.js : Class用
  • jQuery.plugin.js : インスタンス作成とinitメソッド実行用

※「plugin」はプラグインの名前

project-name/
    ├ _src/
    │   └ js/
    │      ├ app.js
    │      └ plugins/
    │           └ plugin
    │               ├ _plugin.js
    │               └ jQuery.plugin.js
    ├ build/
    │   └ js/
    │      └ bundle.js
    ├ node_modules/
    ├ gulpfile.js
    ├ package.json
    └ rollup.config.js

_plugin.js

jquery.plugin.js

プラグインを使う

Rollupでの実行サンプルです。

app.js

さいごに

init()をつけ忘れそうですが、Classファイルだけ用意して使うなら下記のようになります。

jQuery from 'jquery';
import Plugin from './plugins/_dropdown.js';

;(function($) {
    window.$ = window.jQuery = jQuery;
    let selector = new Plugin( '.selector', {
        message: 'hogehoge'
    }).init();
})(jQuery);

コンストラクタ内でinitメソッドを実行させず、インスタンスを作るときにinitメソッドをつけずに済む方法が分かれば脱jQueryの道も明るそうです。

以上です。