Front-end package managers

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

5

01 Bower

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

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などの他ツールを使って読み込んだり整理したりする

パッケージ管理以外は何もしてくれない

8

02 Browserify

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

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な書き方をきちんと理解しなければならない

11

03 Duo

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

12

npm install duo -g

インストール

使いたいライブラリとかがあったらrequire()する

ライブラリのインストール

var _ = require('jashkenas/underscore');

コマンドで１つのJSにまとめられるduo main.js > main.concat.js

requireに書くだけで管理対象としてくれる

require(‘jquery/jquery’)はエラーで入れられず →require(‘jquery/jquery@1.11.1:dist/jquery.js’);とバージョンとmain.jsに あたる部分を指定してあげると入れられた

13

githubのアカウントとトークンキーを要求されるなど 初期設定にちょっと手間がかかる

CSSも@importを見て結合してくれる

14

04 WebPack

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

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

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