front-end package managers
DESCRIPTION
2014/09/16 21cafeにて行われたJSオジサンでのLT資料です。 Front-endで活用できるパッケージマネージャー「bower」「Browserify」「Duo」「WebPack」をざっくり紹介しました。 お気に入りはBrowserifyです。Duoには今後も注目していきます。TRANSCRIPT
1
Front-end Package Managers
2
@frontainerFront-end Engineer
2014/4 LIG入社 フロントエンドエンジニア
http://www.slideshare.net/frontainer/angularjs-1angularjs-lig
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Gulp入門 - コーディングを10倍速くする
林 優一
http://www.slideshare.net/frontainer/gulp-10
CSS Living StyleGuidehttp://www.slideshare.net/frontainer/css-living-styleguide
今年に入ってちょこちょこ外で活動しています 登壇のご依頼は直接ご連絡ください
https://github.com/frontainer
3
Package Manager
4
6
npm install bower -g
インストール
使うときはjsをscriptタグで参照する、が長い。 GulpやGruntとセットで使うとスマートになる（grunt-bower-task,gulp-bowerなど）
bower install jquery
ライブラリのインストール
<script src="bower_components/jquery/dest/jquery.min.js"></script>
とにかく簡単
入門にはおすすめ
7
納品時に不要ファイルが多くて困る -> GruntやGulpなどの他ツールを使って読み込んだり整理したりする
パッケージ管理以外は何もしてくれない
9
npm install bower -g
インストール
呼び出すときはrequire()を使って呼び出す
npm install jquery --save
ライブラリのインストール
var $ = require('jquery');
コマンドで１つのJSファイルにまとめられる
browserify main.js main.concat.js
シンプルでオススメ
コマンドで１つにまとめてくれるので、無駄が少ない
10
GulpやGruntプラグインもあるので自動化がすぐできる (gulp-browserify,grunt-browserify)
CommonJSな書き方をきちんと理解しなければならない
12
npm install duo -g
インストール
使いたいライブラリとかがあったらrequire()する
ライブラリのインストール
var _ = require('jashkenas/underscore');
コマンドで１つのJSにまとめられるduo main.js > main.concat.js
requireに書くだけで管理対象としてくれる
require(‘jquery/jquery’)はエラーで入れられず →require(‘jquery/[email protected]:dist/jquery.js’);とバージョンとmain.jsに あたる部分を指定してあげると入れられた
13
githubのアカウントとトークンキーを要求されるなど 初期設定にちょっと手間がかかる
CSSも@importを見て結合してくれる
15
npm install webpack -g
インストール
npm install jquery --save
ライブラリのインストール
var _ = require('jquery');
呼び出すときはrequire()を使って呼び出す
webpack main.js main.concat.js
コマンドで１つのJSにまとめられる
Browserifyと同じように使える
外部jsonを呼ぶのに別途loaderが必要
16
loaderが充実していていろんなことができる
loaderで拡張しないと劣化Browserify
日本語情報が少ない
17
まとめ
とりあえず導入なら手軽なbower
慣れてきたらbrowserifyがオススメ
18
Duoはこれからが楽しみな存在。初期設定の敷居がさがれば広まると思う
拡張好きならWebPack（Browserifyもtransform使えば拡張できる）
19
ご清聴ありがとうございました