Instalasi dan Penggunaan Bower, Package Manager utk Javascript

Website modern, kini mau tidak mau disusun dengan banyak komponen javascript, ada framework, ada library, ada asset dll. Memantau perkembangan masing-masing komponen dan memastikan kesemuanya berjalan uptodate kayanya bukan pekerjaan yang gampang, apalagi jika sudah bersinggungan dengan banyak framework dan library javascript.

Untuk itulah kita butuh solusi untuk manage semua kebutuhan diatas. Di PHP kita mengenal composer, di javascript ada bower. Bower sebenarnya tidak hanya mampu mengelola kebutuhan Javascript saja, tapi juga file HTML, CSS, Font dan Image.

Instalasi Bower

Sebelum menginstall bower, setidaknya sudah harus ada node, npm dan git ya. Untuk instalasi bower, cukup jalankan perintah ini di terminal/console:

[sourcecode]npm install -g bower[/sourcecode]

pada direktori public tempat asset biasanya di load ya.

Penggunaan Bower

Untuk menggunakan bower, semuanya bisa dilakukan lewat terminal/console. Seluruh packages yang diinstall oleh bower, akan masuk ke folder bower_components/.

Untuk melakukan instalasi packages, tulis nama paket setelah perintah bower install. Misal:

[sourcecode]bower install jquery[/sourcecode]

Jika packages itu kebetulan tersedia di Github, kita juga cukup menginstallnya dengan tag shorthand dari Githubnya. Contoh

[sourcecode]bower install desandro/masonry[/sourcecode]

atau jika hanya ada repo git saja, contohnya:

[sourcecode]bower install git://github.com/panahbiru/mrvue.git[/sourcecode]

dan jika hanya tersedia pada website saja, bisa pakai contoh berikut:

[sourcecode]bower install http://www.flotcharts.org/flot/jquery.flot.js[/sourcecode]

Bower sendiri menyediakan juga fitur searching packages di https://bower.io/search/

Untuk penggunaan javascript itu sendiri bisa digunakan secara manual ataupun menggunakan Grunt atau RequireJS. Cara manualnya, mudah. Contohnya:

[sourcecode]<script src="bower_components/jquery/dist/jquery.min.js"></script>[/sourcecode]