Petunjuk Singkat: Apa yang Anda Lakukan Ketika Medapati Sebuah File Bower

() translation by (you can also view the original English article)

Pernahkah Anda mengunduh sebuah repositori GitHub, namun kemudian menemukan beberapa file aneh dan asing yang tidak Anda kenali?

Misal, anda sedang mengerjakan sebuah website dan membutuhkan sebuah pustaka, JavaScript atau CSS, untuk menambahkan beberapa fitur ke dalam website anda. Anda menemukan sebuah pustaka yang tepat di Github, dan langsung mengunduhnya. Ketika anda membuka pustaka tersebut, anda menemukan beberapa file, dan salah satunya adalah bower.json.

Lebih lanjut, anda mungkin juga menemukan instruksi di dalam repositori tersebut yang biasanya berbunyi.

Instal dengan Bower: bower install bootstrap.

Anda mungkin bertanya apa kegunaan file ini, begitupula mengapa anda harus menginstalnya dengan Bower. Saya baru saja ditanya dengan pertanyaan serupa oleh seorang rekan web desainer dan saya menduga ada banyak orang yang mungkin juga bingung tentang hal ini. Jika anda termasuk orang tersebut, petunjuk berikut akan membantu anda!

File Bower

Bower adalah pengelola paket web. Bower membantu anda untuk mengatur dependensi; file yang dibutuhkan untuk proyek anda.

bower.json, file yang kita bahas di sini, memiliki peran sentral di dalam linkup Bower. Sebelumnya, file ini diberi nama component.json, tapi kemudian diubah menjadi bower.json agar tidak terjadi konflik dengan alat lain yang menggunakan nama file yang sama.

bower.json membantu Bower memahami proyek anda; Bower merekam meta data seperti nama proyek, versi, pencipta, ijin, dependensi, dan lain-lain. Informasi ini tersusun di dalam format JSON yang secara khusus nampak seperti di bawah ini:

{
  "name": "awesome",
	"version": "1.0.0",
	"authors": [
"John Doe"
	],
	"description": "The Most Awesome thing in the Galaxy",
	"license": "MIT",
	"dependencies": {
"cool-library": "1.1.2",
"good-library": "2.1.3"
	}
}

Dari file JSON di atas, kita dapat menyimpulkan bahwa proyek ini bernama "awesome", saat ini versi "1.0.0", diciptakan oleh "John Doe", sejumlah detail lain, dan beberapa dependensi yang harus ada agar proyek dapat berjalan.

Jika anda menemukan bower.json di dalam sebuah pustaka, hal itu menunjukkan dua hal:

Pertama, pencipta proyek menetapkan pustaka tersebut sebagai sebuah paket Bower. Proyek tersebut mungkin telah terdaftar di Bower registry.
Pencipta proyek mungkin telah menggunakan Bower untuk mengatur pustaka proyek tersebut, membuatnya lebih mudah bagi pengembang lain yang mungkin akan mengembangkan lebih lanjut proyek tersebut di kemudian hari.

Bower menggunakan file ini untuk beberapa hal. Bower menggunakan rincian meta data untuk menampilkan informasi ketika kita melakukan pencarian pada Bower registry.

Anda akan menemukan beberapa proyek-proyek terkenal di dalam Bower registry

Bower juga akan mengurai file tersebut ketika kita menjalankan beberapa perintah seperti bower version dan bower install.

Bower Install

bower install adalah perintah untuk menginstal sebuah paket yang terdaftar di dalam Bower registry. Perintah ini juga akan menginstal paket-paket yang tercantum di dalam file bower.json di bawah "dependencies". Secara baku, paket-paket ini akan ditambahkan di dalam folder bernama bower_components.

Sebagai sebuah contoh, mari kita install Animate.css dan Bootstrap with Bower.

Pertama, anda perlu menginstal Bower. Simak Meet Bower: A Package Manager For The Web untuk rincian dalam hal ini. Setelah itu anda dapat mengetik perintah berikut di Terminal atau Command Prompt (jika anda menggunakan Windows) yang akan menginstal paket tersebut secara bersamaan.

1	bower install animate.css bootstrap

Sekarang anda akan mendapati mereka telah ditambahkan di dalam bower_components.

Folder Animate.css dan Bootstrap ditambahakan di dalam bower_components

Seperti yang dapat anda lihat di atas, kita memiliki satu lebihan folder, jquery. Hal ini karena Bootstrap menetapkannya sebagai sebuah dependensi; Komponen Bootstrap JavaScript membutuhkan jQuery agar berfungsi. Jika anda menengok file bower.json yang disertakan di dalam paket Bootstrap, anda akan menjumpainya tercatat pada bagian paling bawah, sebagai berikut.

jQuery tercatat sebagai dependensi di dalam bower.json Bootstrap

Selanjutnya?

Dengan asumsi anda telah mengunduh sebuah pustaka yang disertai dengan file bower.json, hal pertama yang saya sarankan adalah anda memeriksa dependensi yang tercantum di dalam file tersebut.

Sebagai contoh, saya telah mengunduh sebuah pustaka JavaScript bernama Revealer.js. Revealer.js nampaknya membutuhkan Reveal.js agar berfungsi. Kita dapat menemukannya tercatat sebagai sebuah dependensi di dalam file bower.json, seperti nampak di bawah ini:

1	{
2	// ...
3	"dependencies": {
4	"reveal.js": "~2.5.0"
5	},
6	// ...
7	}

Untuk memastikannya, jika kita membuka index.html dari folder views, kita akan menjumpai file reveal.js ditautkan di dalam sebuah script tag, seperti berikut.

1	<script src="components/reveal.js/js/reveal.min.js"></script>

Sekarang kita perlu membuka folder pustaka di Terminal atau Command Prompt, kemudian ketik:

1	bower install

Seperti yang disebutkan di awal, perintah ini akan mengunduh semua yang terdaftar sebagai dependensi di bower.json sekaligus.

Catatan: Di dalam kasus ini, paket ditambahkan di dalam folder public/components, seperti yang telah ditentukan di dalam file bowerrc. .bowerrc file adakalanya turut menyertai bower.json file, dan digunakan untuk menentukan direktori instal.

Memperbarui Paket

Paket yang telah terinstal dapat diperbarui dari waktu ke waktu, apakah untuk memperbaiki bug atau menambahkan fitur-fitur baru. Dengan Bower, kita dapat memperbarui pustaka yang terinstal dengan mudah. Pertama, sila ketik:

1	bower list

Perintah ini akan mendaftar paket ynag saat ini terinstal di dalam proyek kita, dan menampilkan versi paling terbaru jika tersedia. Di dalam kasus ini, nampaknya Reveal.js memiliki versi terbaru. Jadi mari kita memperbaruinya.

Ketik perintah berikut untuk memperbarui Reveal.js.

1	bower install --save reveal.js#2.6.2

Perintah ini juga akan mengubah versi yang tercatat di dalam bower.json.

1	{
2	// ...
3	"dependencies": {
4	"reveal.js": "2.6.2"
5	},
6	// ...
7	}

Kesimpulan

Bower adalah alat yang ringkas untuk mengatur pustaka proyek. Layaknya memiliki AppStore dan Google Play; kita dapat menginstal, memperbarui, dan menhapus pustaka dengan mudah. Saya berharap petunjuk ini telah membantu anda atas kebingungan yang mungkin anda alami ketika mengunduh sebuah pustaka, serta menunjukkan anda beberapa manfaat menggunakan Bower di dalam alur kerja anda.