Front-end package managers
12 likes4,993 views
2014/09/16 21cafeにて行われたJSオジサンでのLT資料です。 Front-endで活用できるパッケージマネージャー「bower」「Browserify」「Duo」「WebPack」をざっくり紹介しました。 お気に入りはBrowserifyです。Duoには今後も注目していきます。
Front-end package managers
- 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
- 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/[email protected]: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使えば拡張できる）