[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-kenalan-dengan-bower-frontend-package-management":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},371,"kenalan-dengan-bower-frontend-package-management","Kenalan Dengan Bower : Frontend Package Management","Agus Yusida January 26, 2016 Dalam pembuatan sebuah website project, kita sering membutuhkan beberapa library atau framework lain khususnya di bagian frontend. Selain itu, belakangan ini banyak sekali",null,[],"2019-09-19T16:00:00Z","2026-07-14T04:39:34.350961Z","\u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"https:\u002F\u002Fsecure.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida January 26, 2016\u003Cp>Dalam pembuatan sebuah website project, kita sering membutuhkan beberapa library atau framework lain khususnya di bagian frontend.\u003C\u002Fp>\u003Cp>Selain itu, belakangan ini banyak sekali library dan framework yang tersedia yang bisa memudahkan kita dalam proses development tersebut. Nah saat kita sudah menggunakan banyak library sekaligus, maka akan muncul masalah saat kita harus memanage atau mengupdate library yang kita gunakan.\u003C\u002Fp>\u003Cp>Kita bisa saja mendownload ulang library tersebut dan menggantinya dengan yang lebih baru tapi bagaimana jika kita punya puluhan library bahkan ratusan sekaligus yang perlu di maintain? \u003C\u002Fp>\u003Cp>Cekidot. \u003Cstrong>Bower.io\u003C\u002Fstrong> adalah sebuah package manager yang membuat kita lebih mudah untuk memanage semua front-end dependency-nya. Dalam tutorial kali ini kita akan membahas bagaimana cara menginstall bower dan cara menggunakannya.\u003C\u002Fp> \u003Ch4>Install Bower\u003C\u002Fh4>\u003Cp>Untuk menginstall Bower, kamu harus menginstall \u003Ca href=\"https:\u002F\u002Fnpmjs.org\u002F\">npm\u003C\u002Fa>, Node package manager. Kalau kamu belum menginstall npm, coba kunjungi \u003Ca href=\"http:\u002F\u002Fnodejs.org\u002F\">Node.js website\u003C\u002Fa> and download  Node.js sesuaikan dengan sistem yang kamu gunakan. Kalau sudah install Node.js pastikan npm berjalan dengan mengeceknya lewat terminal.\u003C\u002Fp>\u003Cpre>\u003Ccode>$ npm version \u002F\u002Fcheck the version of npm\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika npm sudah terinstall dengan benar, sekarang kita akan lanjut menginstall Bower. Ketik code di bawah ini untuk menginstall Bower.\u003C\u002Fp>\u003Cpre>\u003Ccode>$ npm install -g bower\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Perintah di atas akan menginstall Bower secara global di sistem kamu, yang artinya kamu dapat memanggil command \u003Ccode>bower\u003C\u002Fcode> di directory mana saja. Selanjutnya kita akan belajar beberapa basic command yang tersedia dan menginstall beberapa package dengan Bower.\u003C\u002Fp>\u003Ch4>Searching Package\u003C\u002Fh4>\u003Cp>Untuk mencari package yang tersedia lewat bower, kamu bisa menggunakan perintah \u003Ccode>search\u003C\u002Fcode> seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower search <query>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Misalnya jika kita ingin mencari sebuah package yang memiliki nama bootstrap, kamu bisa menggunakan perintah seperti berikut:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower search bootstrap\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kamu perlu menunggu sebentar, dan jika sudah selesai maka kamu akan melihat banyak list package yang memiliki nama bootstrap di terminal kamu. Kurang lebih seperti di bawah ini:\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch4>Install Package\u003C\u002Fh4>\u003Cp>Jika kalian sudah menemukan nama package yang mau diinstall, kita lanjut untuk bagaimana cara menginstall package-package tersebut.\u003C\u002Fp>Package directory\u003Cp>Package directory ini maksudnya dimana nanti kamu akan menaruh file-file dari package yang kamu mau install\u002F\u003C\u002Fp>\u003Cp>Secara default, semua package yang kamu install akan berada di dalam folder bower_components. Namun jika kamu ingin package-package tersebut di install di folder lain maka caranya adalah dengan membuat sebuah file baru dan di beri nama \u003Ccode>.bowerrc\u003C\u002Fcode> kemudian silakan isi file tersebut dengan code di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>{\n  \"directory\": \"path\u002Fke\u002Ffolder\u002Fyang\u002Fdiinginkan\"\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Pastikan kamu simpan di base folder project kamu ya.\u003C\u002Fp>Install lewat command line\u003Cp>Nah sebelumnya kan kita sudah bisa mencari package lewat bower, selanjutnya kita akan menginstall package yang kita mau, kita bisa menggunakan perintah \u003Ccode>install\u003C\u002Fcode> seperti berikut:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower install <package_name>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Secara umum kita bisa menginstall package menggunakan nama packagenya langsung, tapi selain itu, kita juga menginstall package dengan beberapa cara lain seperti:\u003C\u002Fp>\u003Cul>\u003Cli>Git endpoint, misalnya \u003Ccode>git:\u002F\u002Fgithub.com\u002Ftwbs\u002Fbootstrap.git\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>path ke local Git repository.\u003C\u002Fli>\u003Cli>Shorthand endpoint seperti \u003Ccode>twbs\u002Fbootstrap\u003C\u002Fcode>. \u003C\u002Fli>\u003Cli>Url ke zip atau tar file. Nanti bower akan mengekstraknya secara otomatis\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Sebagai informasi, perintah \u003Ccode>install\u003C\u002Fcode> tersebut akan secara otomatis menginstall dan mendownload versi terakhir dari package tersebut. Namun jika kamu ingin untuk menginstall versi tertentu kamu bisa menuliskan versi dari package tersebut setelah nama package dipisahkan dengan # seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower install <package_name>#<version>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Secara default, jika kamu menginstall beberapa package, Bower akan membuat sebuah diretory baru dengan nama bower_components dimana semua package yang kamu install akan berada di dalam sana. Misalnya kamu menginstall bower di sebuah diretory dengan nama example maka susunan directorynya kira-kira akan menjadi seperti berikut:\u003C\u002Fp>\u003Cpre>\u003Ccode>example\n    |_ bower_components\n        |_ package_name\n        |_ package_name\n        |_ package_name\n.....\u003C\u002Fcode>\u003C\u002Fpre>Innstall lewat file bower.json\u003Cp>Selain lewat terminal, kamu juga bisa menginstall package\u002Flibrary sekaligus dengan membuat file bernama \u003Cem>bower.json\u003C\u002Fem>. Kamu bisa membuat manual seperti contoh di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>{\n  \"name\": \"app-name\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n \n  \"dependencies\": {\n    \"jquery\": \"~1.10.2\"\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Atau kamu bisa lewat command line dengan perintah \u003Ccode>bower init\u003C\u002Fcode> di directory yang kamu mau. Bower akan menampilakan beberapa perintah yang mudah untuk diikuti, tapi kamu harus tetap mebambahkan list dependecies-nya secara manual.\u003C\u002Fp> \u003Cp>Penjelasan mengenai masing-masing content dari file bower.json tersebut adalah:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cem>name\u003C\u002Fem> : Nama dari project kamu\u003C\u002Fli>\u003Cli>\u003Cem>version\u003C\u002Fem> : Versi dari project yang kamu buat\u003C\u002Fli>\u003Cli>\u003Cem>private\u003C\u002Fem> : Dengan mensetting valuenya menjadi true, berarti package tersebut adalah private dan kamu tidak bermaksud untuk menambahkannya ke registry\u003C\u002Fli>\u003Cli>\u003Cem>dependencies\u003C\u002Fem> : list package yang akan kamu gunakan di dal am project kamu\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Kalau kamu sudah punya file bower.json dan lengkap dengan dependencies-nya maka untuk menginstallnya kamu tinggal jalankan perintah \u003Ccode>bower install\u003C\u002Fcode>  dan bower akan mendownloadnya buat kamu.\u003C\u002Fp>\u003Cp>Jika semua dependency yang kamu inginkan sudah terdownload, kamu bisa menambahnya ke dalam HTML markup lewat tag atau .\u003C\u002Fp>\u003Cpre>\u003Ccode><link rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"path\u002Fto\u002Fbower_components\u002Fbootstrap\u002Fdist\u002Fcss\u002Fbootstrap.min.css\">\n \n<script src=\"path\u002Fto\u002Fbower_components\u002Fjquery\u002Fjquery.min.js\"><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>Update Package\u003C\u002Fh4>\u003Cp>Seperti di awal tadi, tugas bower adalah memudahkan kita untuk memanage library\u002Fpackage yang kita gunakan. Salah satunya adalah memudahkan kita untuk meng-update library yang kita inginkan. Untuk mengupdate package kamu bisa menggunakan perintah \u003Ccode>bower update\u003C\u002Fcode>. Ini akan mendownlod ulang package yang kamu punya sebelumnya dengan versi yang kamu deklarasikan untuk masing-masing package di file \u003Ccode>bower.json\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Jika kamu ingin mengupdate salah satu package saja, kamu bisa menjalankan perintah bower update di ikuti dengan nama packagenya. Contohnya seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower update query\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4>Melihat List Package\u003C\u002Fh4>\u003Cp>Untuk mengetahui package apa saja yang terinstall di project kamu, kamu bisa menggunakan perintah \u003Ccode>bower list\u003C\u002Fcode> lewat command line. \u003C\u002Fp>\u003Cp>Dibawah ini adalah contoh saat kita menjalankan perintah bower list:\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Pada gambar di atas adalah contoh untuk simple project yang menggunakan \u003Cem>Bootstrap\u003C\u002Fem>, \u003Cem>JQuery\u003C\u002Fem>, \u003Cem>JQuery-Pjax\u003C\u002Fem> dan \u003Cem>RequireJs\u003C\u002Fem>. Sebagai tambahan, saat kamu menjalankan bower list, kamu juga dapan mengetahui varsi terbaru dari package tersebut jika tersedia lewat bagian \u003Cem>latest\u003C\u002Fem>.\u003C\u002Fp>\u003Ch4>Uninstall Package\u003C\u002Fh4>\u003Cp>Untuk menguninstall package kamu bisa menjalankan perintah \u003Ccode>bower uninstall\u003C\u002Fcode> di ikutin dengan nama packagenya seperti contoh di bawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower uninstall jquery\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kamu bisa meng-uninstall beberapa package sekaligus dengan menuliskan nama packagenya secara berurutan. Contohnya seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower uninstall jquery bootstrap requirejs\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sebagai tambahan lagi, jika kamu ingin dependency di bower.json juga ikut terupdate maka bisa menambahkan perintah –save\u003C\u002Fp>\u003Cpre>\u003Ccode>$ bower uninstall jquery --save\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Contoh di atas saat dijalankan maka akan meremove jquery dari folder \u003Cem>bower_components\u003C\u002Fem> dan juga menghapus jquery dari list depedency di file bower.json \u003C\u002Fp>\u003Ch4>Kesimpulan\u003C\u002Fh4>\u003Cp>Jadi dengan adanya Bower, bila dulu kita harus manual mengatur library atau package yang dibutuhkan dalam sebuah project maka sekarang pekerjaan tersebut menjadi lebih mudah, kita juga bisa mengatur version mana yang kita butuhkan tanpa harus manual mendownload ulang satu persatu library tersebut. Dengan sebuah command saja maka library\u002Fpackage kamu sudah otomatis terinstall dan terupdate. \u003C\u002Fp>\u003Ch4>Useful Resource\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Ca href=\"http:\u002F\u002Fbower.io\u002F\">Bower\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbower\u002Fbower\">Bower GitHub Repository\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"http:\u002F\u002Fsindresorhus.com\u002Fbower-components\u002F\">Bower Component Directory\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>YO! Bower provides us with a way of managing this complexity.\u003Cbr\u002F>\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags:","Agus Yusida January 26, 2016 Dalam pembuatan sebuah website project, kita sering membutuhkan beberapa library atau framework lain khususnya di bagian frontend. ",[],[],0]