黒田 晋一 GulpでRollupを使う / rollup-stream、rollupの続きです。RollupでjQueryを読み込んで既存のjQueryプラグインを使う方法をいくつか試した備忘録です。slickを例にしてます。
import $ from ‘jquery’;でjQueryを読み込む場合
他ライブラリとの衝突を防がない場合
バンドル時にjQueryを含めるかどうかにかかわらず下記のコードで実行できます。
app.js
他ライブラリとの衝突を防ぐ場合
コードにjQueryを含めてバンドル
jqueryをグローバルオブジェクトにしたうえで実行箇所を即時関数で囲みます。
app.js
rollup.config.js
コードにjQueryを含めずにバンドル
この場合は、jqueryのグローバルオブジェクト指示なしで実行箇所を即時関数で囲みます。
app.js
rollup.config.js
import jQuery from ‘jquery’;でjQueryを読み込む場合
モジュール名を$にした場合と対応が変わります。
他ライブラリとの衝突を防がない場合
コードにjQueryを含めてバンドル
app.js
rollup.config.js
コードにjQueryを含めずにバンドル
app.js
rollup.config.js
他ライブラリとの衝突を防ぐ場合
バンドル時にjQueryを含めるかどうかにかかわらず下記のコードで実行できます。
app.js
まとめ
RollupでjQueryを使う場合は、あらかじめ下記3つの条件を決めておきましょう。雰囲気でコーディングすると、どハマりすることになります。
- jQueryの読み込み時のモジュール名
- 即時関数使用の有無
- 最終的なコンパイル方法
以上です。