2014/09/16 21cafeにて行われたJSオジサンでのLT資料です。 Front-endで活用できるパッケージマネージャー「bower」「Browserify」「Duo」「WebPack」をざっくり紹介しました。 お気に入りはBrowserifyです。Duoには今後も注目していきます。

1. 1
Front-end Package Managers

2. 2
@frontainer
Front-end Engineer
林 優一
2014/4 LIG入社
フロントエンドエンジニア
今年に入ってちょこちょこ外で活動しています
登壇のご依頼は直接ご連絡ください
Gulp入門 - コーディングを10倍速くする
http://www.slideshare.net/frontainer/gulp-10
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
http://www.slideshare.net/frontainer/angularjs-1angularjs-lig
CSS Living StyleGuide
http://www.slideshare.net/frontainer/css-living-styleguide
https://github.com/frontainer

3. 3
Package Manager

4. 4

5. 5
01 Bower
みんなが大好きなTwitterが作ってます
http://bower.io/

6. 6
インストール
npm install bower -g
ライブラリのインストール
bower install jquery
<script src="bower_components/jquery/dest/jquery.min.js"></script>
使うときはjsをscriptタグで参照する、が長い。
GulpやGruntとセットで使うとスマートになる（grunt-bower-task,gulp-bowerなど）

7. とにかく簡単
入門にはおすすめ
7
パッケージ管理以外は何もしてくれない
納品時に不要ファイルが多くて困る
-> GruntやGulpなどの他ツールを使って読み込んだり整理したりする

8. 8
02 Browserify
最近グイグイ来てる魔法の杖
http://browserify.org/

9. 9
インストール
npm install bower -g
ライブラリのインストール
npm install jquery --save
呼び出すときはrequire()を使って呼び出す
var $ = require('jquery');
コマンドで１つのJSファイルにまとめられる
browserify main.js main.concat.js

10. シンプルでオススメ
コマンドで１つにまとめてくれるので、無駄が少ない
10
GulpやGruntプラグインもあるので自動化がすぐできる
(gulp-browserify,grunt-browserify)
CommonJSな書き方をきちんと理解しなければならない

11. 11
03 Duo
最近出てきた検索しにくいcomponentの継承者
http://duojs.org/

12. 12
インストール
npm install duo -g
ライブラリのインストール
使いたいライブラリとかがあったらrequire()する
var _ = require('jashkenas/underscore');
コマンドで１つのJSにまとめられる
duo main.js > main.concat.js

13. requireに書くだけで管理対象としてくれる
require(‘jquery/jquery’)はエラーで入れられず
→require(‘jquery/jquery@1.11.1:dist/jquery.js’);とバージョンとmain.jsに
あたる部分を指定してあげると入れられた
13
githubのアカウントとトークンキーを要求されるなど
初期設定にちょっと手間がかかる
CSSも@importを見て結合してくれる

14. 14
04 WebPack
あまり知られていないけど汎用性が高い
http://webpack.github.io/

15. 15
インストール
npm install webpack -g
ライブラリのインストール
npm install jquery --save
呼び出すときはrequire()を使って呼び出す
var _ = require('jquery');
コマンドで１つのJSにまとめられる
webpack main.js main.concat.js

16. Browserifyと同じように使える
外部jsonを呼ぶのに別途loaderが必要
16
loaderが充実していていろんなことができる
loaderで拡張しないと劣化Browserify
日本語情報が少ない

17. 17
まとめ

18. とりあえず導入なら手軽なbower
慣れてきたらbrowserifyがオススメ
18
Duoはこれからが楽しみな存在。初期設定の敷居がさがれば広まると思う
拡張好きならWebPack（Browserifyもtransform使えば拡張できる）

19. 19
ご清聴ありがとうございました