More Related Content
Similar to Front-end package managers (20)
More from Hayashi Yuichi (10)
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
- 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などの他ツールを使って読み込んだり整理したりする
- 9. 9
インストール
npm install bower -g
ライブラリのインストール
npm install jquery --save
呼び出すときはrequire()を使って呼び出す
var $ = require('jquery');
コマンドで1つのJSファイルにまとめられる
browserify main.js main.concat.js
- 11. 11
03 Duo
最近出てきた検索しにくいcomponentの継承者
http://duojs.org/
- 12. 12
インストール
npm install duo -g
ライブラリのインストール
使いたいライブラリとかがあったらrequire()する
var _ = require('jashkenas/underscore');
コマンドで1つのJSにまとめられる
duo main.js > main.concat.js
- 15. 15
インストール
npm install webpack -g
ライブラリのインストール
npm install jquery --save
呼び出すときはrequire()を使って呼び出す
var _ = require('jquery');
コマンドで1つのJSにまとめられる
webpack main.js main.concat.js