jquery-module
TSUMIKI INC. jQuery modules
インストール
npm でインストールします。
npm install jquery-module -S
利用方法
基本的には、 Browserify や webpack などのモジュールローダーを利用します。
利用例:
import Smoothscroll from 'jquery-module/lib/smoothscroll';
上記モジュールローダーが利用不可の場合は、以下のファイルを <script>
で読み込み、 window.$Module
配下から利用します。
<script src="jquery.js"></script>
<script src="jquery-module.js"></script>
<script>
new $Module.Smoothscroll(element);
</script>
IE8 以下もサポートの場合
var Smoothscroll = require('jquery-module/lib/es3-smoothscroll');
もしくは es3
配下から利用します。
var Smoothscroll = require('jquery-module').es3.Smoothscroll;
build/jquery-module.js
の場合は以下のように利用します。
<script src="jquery.js"></script>
<script src="jquery-module.js"></script>
<script>
new $Module.es3.Smoothscroll(element);
</script>
モジュール追加方法
※要ドキュメント化 Wikiに移行検討
ソースファイル作成
./src
以下にファイルを追加します。 ./src/my-module.js
基本的には、ある程度まとまった機能毎に 1 ファイルにしましょう。
下記を参考に、なるべく ES6 (ES2015) で書きましょう。
Babel で ES5 にトランスパイルするので、モダンブラウザと IE9 以上が対象となります。
IE8 以下もサポートするモジュールを作成する場合は、ファイル名に es3-
プレフィックスをつけ、 (es3-my-module.js
) ES3 で普通に書くか、 CoffeeScript などで書きます。
./index.js
に追記
./index.js
に以下の書式で追記します。
module.exports = {
Smoothscroll: require('./lib/smoothscroll'),
example: require('./lib/example'),
es3: {
Smoothscroll: require('./lib/es3-smoothscroll'),
Rollover: require('./lib/es3-rollover')
}
};
ビルド
npm run build
コマンドで、ビルドします。
以下のタスクが順に実行されます。
- ES6, CoffeeScript の構文チェック
- ES6, CoffeeScript のコンパイル
-
$ = require 'jquery'
を$ = global.$
に置換(理由は後述) - Browserify の standalone オプションで
<script>
用のファイル生成 -
<script>
用ファイルのミニファイ - 上記置換を戻す
なるべくテストも書く
./test
以下に、対象のテストファイルを .spec
サフィックスをつけて追加します。
npm test
でテストが走ります。
現状で利用しているテストツールは以下です。
- mocha テストフレームワーク
- jsdom DOMシミュレータ
- power-assert アサーションライブラリ
できる範囲でテストも書いておくと楽かと思います。
$ = require 'jquery'
置換について
ビルド時の Browserify で <script>
用のファイルを生成した場合(standalone)、依存モジュールも全てまとめたものを生成してくれます。(jquery-module.js
)
jQuery などのわりと大きなライブラリに依存したモジュールだと生成されたファイルのサイズが大きくなります。
また、 jQuery に依存したモジュールを利用するプロジェクトは、メインで書くファイルのほうでも jQuery で書く場合が多いかと思います。
以上の理由から、 jquery-module.js
を利用する場合は、大きなサイズのライブラリは別で読み込む前提の仕様にするため、 グローバルに生やしたもの($ = global.$
)を利用するようにしてあります。
jQuery の例だと以下です。
<script src="jquery.js"></script>
<script src="jquery-module.js"></script>
License
MIT
© TSUMIKI INC