黒田 晋一 RollupでjQueryを使う方法では、RollupでjQueryを読み込んで既存のjQueryプラグインを使う方法をいくつか試しましたが、今回はさらに自作プラグインを使う方法について触れます。プロジェクト内プラグインが増えるたびにrollup.config.jsを編集するのはめんどうなので、multi input/outputを設定しない前提の内容となってます。
プロジェクトの構成
「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
コーディングの条件
下記を条件にコーディングするものとします。
- 記述漏れを防ぐため、jQueryオブジェクトをグローバルオブジェクトとして明示的に指定しない。
- 既存、自作にかかわらず、すべてのjQueryプラグインを即時関数内で実行する。
- 混乱を避けるため、コンパイル時にjQueryを含めるかどうかにかかわらずコードの内容を同じにする。
jQueryプラグインの構成とデザインパターン
プラグイン用に作成するファイルは2つです。構成はスムーススクロールの jQuery プラグインを npm にあげるようにしました – モンキーレンチで紹介されているプラグインを参考にしてます。また、prototypeを使ってClassっぽい書き方ができていた、jquery.highly-configurable.plugin.boilerplate.jsをES.Nextで書き換えたプラグインを作成するとします。
実際のコード
プラグイン用ファイル
- _plugin.js : Class用
- jquery.plugin.js : インスタンス作成とinitメソッド実行用
_plugin.js
jquery.plugin.js
バンドル用ファイル
app.js
Rollup設定ファイル
jQueryを含めてバンドルする場合
rollup.config.js
jQueryを含めずにバンドルする場合
rollup.config.js
解説とまとめ
バンドル用ファイルでは『RollupでjQueryを使う方法』で触れた方法でjQueryを読み込むことで、コーディングの条件の1と2を満たしてます。また、プラグイン用ファイル両方に「import $ from “jquery”;」を入れることで、$がjqueryのエイリアスであることをRollupに教えることができています。なお、jQueryを含めずにバンドルする場合は、プラグイン用ファイル両方へのjQueryの読み込み記述をする必要はありませんが、コーディングの条件の3を満たすために共通で記述することにしました。RollupでjQueryを読み込む場合はモジュール名に意味がついてくるようでした。
以上です。