jquery-module v1.0.3
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
10 years ago