Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front-end package managers

4,417 views

Published on

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

Published in: Technology
  • Be the first to comment

Front-end package managers

  1. 1. 1 Front-end Package Managers
  2. 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. 3 Package Manager
  4. 4. 4
  5. 5. 5 01 Bower みんなが大好きなTwitterが作ってます http://bower.io/
  6. 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. とにかく簡単 入門にはおすすめ 7 パッケージ管理以外は何もしてくれない 納品時に不要ファイルが多くて困る -> GruntやGulpなどの他ツールを使って読み込んだり整理したりする
  8. 8. 8 02 Browserify 最近グイグイ来てる魔法の杖 http://browserify.org/
  9. 9. 9 インストール npm install bower -g ライブラリのインストール npm install jquery --save 呼び出すときはrequire()を使って呼び出す var $ = require('jquery'); コマンドで1つのJSファイルにまとめられる browserify main.js main.concat.js
  10. 10. シンプルでオススメ コマンドで1つにまとめてくれるので、無駄が少ない 10 GulpやGruntプラグインもあるので自動化がすぐできる (gulp-browserify,grunt-browserify) CommonJSな書き方をきちんと理解しなければならない
  11. 11. 11 03 Duo 最近出てきた検索しにくいcomponentの継承者 http://duojs.org/
  12. 12. 12 インストール npm install duo -g ライブラリのインストール 使いたいライブラリとかがあったらrequire()する var _ = require('jashkenas/underscore'); コマンドで1つのJSにまとめられる duo main.js > main.concat.js
  13. 13. requireに書くだけで管理対象としてくれる require(‘jquery/jquery’)はエラーで入れられず →require(‘jquery/jquery@1.11.1:dist/jquery.js’);とバージョンとmain.jsに あたる部分を指定してあげると入れられた 13 githubのアカウントとトークンキーを要求されるなど 初期設定にちょっと手間がかかる CSSも@importを見て結合してくれる
  14. 14. 14 04 WebPack あまり知られていないけど汎用性が高い http://webpack.github.io/
  15. 15. 15 インストール npm install webpack -g ライブラリのインストール npm install jquery --save 呼び出すときはrequire()を使って呼び出す var _ = require('jquery'); コマンドで1つのJSにまとめられる webpack main.js main.concat.js
  16. 16. Browserifyと同じように使える 外部jsonを呼ぶのに別途loaderが必要 16 loaderが充実していていろんなことができる loaderで拡張しないと劣化Browserify 日本語情報が少ない
  17. 17. 17 まとめ
  18. 18. とりあえず導入なら手軽なbower 慣れてきたらbrowserifyがオススメ 18 Duoはこれからが楽しみな存在。初期設定の敷居がさがれば広まると思う 拡張好きならWebPack(Browserifyもtransform使えば拡張できる)
  19. 19. 19 ご清聴ありがとうございました

×