近頃のウェブサイトでは、複数のJavaScriptライブラリが使わるのが珍しく有りません。
複数のJavaScriptライブラリをまとめて管理できるのが「Ender」です。例えば、domready、qwery、underscoreといったライブラリをコンパクトにまとめて ender.js として呼び出して使うことができます。
Enderのインストールには、node と npm が必要です。Nodeの開発環境が整っていれば、問題なくインストールできます。
nodeやnpmインストール方法は
- Mac(Lion) にNodeをインストールする
- npm install でエラーになったとき。npm ERR! Could not create
- nvmでsudo npm install -g から卒業する
あたりを参考に（OSはMacです）。
では、Enderを早速インストールしてみます。
$ npm install -g ender
まとめたいパッケージを複数指定してみます。ender build package1 package2... のように指定します。
$ ender build domready qwery underscore Welcome to ENDER - The no-library library ----------------------------------------- installing packages: "ender-js domready qwery underscore"... this can take a minute... npm http GET https://registry.npmjs.org/ender-js npm http GET https://registry.npmjs.org/domready npm http GET https://registry.npmjs.org/qwery npm http GET https://registry.npmjs.org/underscore npm http 200 https://registry.npmjs.org/underscore npm http 200 https://registry.npmjs.org/domready npm http GET https://registry.npmjs.org/underscore/-/underscore-1.3.1.tgz npm http GET https://registry.npmjs.org/domready/-/domready-0.2.11.tgz npm http 200 https://registry.npmjs.org/ender-js npm http GET https://registry.npmjs.org/ender-js/-/ender-js-0.3.7.tgz npm http 200 https://registry.npmjs.org/qwery npm http GET https://registry.npmjs.org/qwery/-/qwery-3.3.3.tgz npm http 200 https://registry.npmjs.org/domready/-/domready-0.2.11.tgz npm http 200 https://registry.npmjs.org/underscore/-/underscore-1.3.1.tgz npm http 200 https://registry.npmjs.org/qwery/-/qwery-3.3.3.tgz npm http 200 https://registry.npmjs.org/ender-js/-/ender-js-0.3.7.tgz ender-js@0.3.7 ./node_modules/ender-js domready@0.2.11 ./node_modules/domready underscore@1.3.1 ./node_modules/underscore qwery@3.3.3 ./node_modules/qwery successfully finished installing packages assembling packages... ender.js successfully built! ender.min.js successfully built!
ender.jsとender.min.jsが出来上がります。
. ├── ender.js ├── ender.min.js └── node_modules/
このender.jsをhtmlから読み込むだけで、domready, qwery, underscode を使えるようになります。
<script type="text/javascript" src="ender.min.js"></script>
<script type="text/javascript">
$('#content a.button')
.bind('click.button', function (e) {
$(this).data('clicked', true).unbind()
e.preventDefault()
})
.css({
opacity: 1
, color: 'red'
})
.fadeOut(250)
$.map(['a', 'b', 'c'], function (letter) {
return letter.toUpperCase()
})
$.ajax('/data', function (resp) {
$('#content').html(resp)
})
</script>
現在有効なライブラリを見るには、ender info コマンドです。
$ ender info Welcome to ENDER - The no-library library ----------------------------------------- Your current build type is "build" Your current minified and compressed library size is 7.2 kB Active packages: ├── domready@0.2.11 - bullet proof DOM ready method ├── qwery@3.3.3 - blazing fast CSS3 query selector engine └── underscore@1.3.1 - JavaScript's functional programming helper library.
パッケージを追加したい場合は、ender add package コマンドです。
$ ender add bean Welcome to ENDER - The no-library library ----------------------------------------- installing packages: "bean"... this can take a minute... npm http GET https://registry.npmjs.org/bean npm http 200 https://registry.npmjs.org/bean npm http GET https://registry.npmjs.org/bean/-/bean-0.4.9.tgz npm http 200 https://registry.npmjs.org/bean/-/bean-0.4.9.tgz bean@0.4.9 ./node_modules/bean successfully finished installing packages assembling packages... ender.js successfully built! ender.min.js successfully built! $ ender info Welcome to ENDER - The no-library library ----------------------------------------- Your current build type is "build" Your current minified and compressed library size is 10.8 kB Active packages: ├── domready@0.2.11 - bullet proof DOM ready method ├── qwery@3.3.3 - blazing fast CSS3 query selector engine ├── underscore@1.3.1 - JavaScript's functional programming helper library. └── bean@0.4.9 - an events api for javascript
削除は ender remove package コマンドで。
EnderでJavaScriptライブラリが足りない！script書き忘れた！ということがなくなりそうです。是非お試しあれ。
0 件のコメント:
コメントを投稿