Mungkin para developer sangat mengerti dan mengenal apa itu Bower? Bower merupakan dependency manager digunakan bagi pengelola aplikasi berbasi jaring laba-laba. Sebagai dependency manager, bower sangat praktis digunakan pengembang bilamana terdapat paket yang diperlukan ataupun diperbaruhi.
Hanya tinggal menggunakan perintah bower install <nama_paket> ataupun bower update , semua paket akan terupdate dan terinstall sebagaimana mestinya yang terdapat dalam bower.json .
Bower cukup populer dan memudahkan pengembang pada tahun 2012 sampai dengan 2016. Dengan semakin banyaknya pengembang membutuhkan bower hingga akhirnya bower disponsori oleh Heroku, Icons8 dan masih banyak lagi!
Ibaratnya, Bower dan Composer bagai Air dan Api. Bower berfokus pada Javascript dan CSS, sedangkan Composer berfokus pada PSR-7 PHP. Composer bisa digunakan layaknya seperti Bower. Tapi Composer bila digunakan seperti Bower, tidaklah sepowerfull Bower.
Sayangnya, Bower pada tahun 2016 telah distop oleh pengembangannya setelah debat panjang di github.com dikarenakan beberapa package tidak mensupport oleh bower. Hal ini membuat sang pembuat Bower untuk memberhentikan pengembangan Bower selanjutnya. Jika anda terbiasa dengan Bower, Bower masih bisa digunakan saat ini namun dengan “catatan” seperti yang diceritakan oleh Assaf Hefetz.
Lalu bagaimana jika kita masih gunakan Bower untuk package manager, sedangkan Bower tidak disupport lagi oleh sang pengembang? Tenang saja, kekhawartiran ini bisa diatasi dengan menggunakan bower-away pada node.js anda. Hal yang perlu disiapkan sebelum menggunakan bower-away adalah memastikan bahwa bower.json dan folder bower_components anda tidak dihapus terlebih dahulu sebelum anda benar-benar migrasi penuh ke Yarn.
Apa itu Yarn? Yarn sama seperti Bower, namun Yarn lebih powerfull ketimbang Bower dikarenakan Yarn telah mendukung 100% package di Github, Bitbucket, Gitlab maupun custom git server sendiri. Yarn merupakan salah satu package manager yang diciptakan diatas wrapper node.js .
Sebelum anda memulai pastikan anda menginstall node.js terlebih dahulu. Tanpa adanya node.js , Yarn tidak akan berjalan seperti apa yang kita inginkan.
Setelah itu masuk kedalam folder anda yang terdapat bower_components dan bower.json . Buka command prompt atau terminal, lakukan perintah seperti berikut ini :
npm i yarn -g npm i bower-away -g
Selesai install lakukan perintah:
bower-away bower-away --diff
Pastikan pada layar command prompt atau terminal anda seperti dibawah ini setelah melakukan bower-away --diff :
{
"dependencies" : {
"@bower_components/Leaflet.label" : "Leaflet/Leaflet.label#^0.2.1",
"@bower_components/Waves" : "fians/Waves#~0.7.2",
"@bower_components/animate.css" : "daneden/animate.css#^3.5.2",
"@bower_components/bower-jquery-mobile" : "hutufairy/bower-jquery-mobile#^1.4.5",
"@bower_components/chart.js" : "nnnick/Chart.js#^2.5.0",
"@bower_components/chartjs.zoom" : "chartjs/Chart.Zoom.js#^0.4.6",
"@bower_components/clusterize" : "NeXTs/Clusterize.js#^0.17.6",
"@bower_components/colors" : "mrmrs/colors#^3.0.0",
"@bower_components/datatables" : "DataTables/DataTables#>=1.10.7",
"@bower_components/datatables-fixedcolumns" : "DataTables/FixedColumns#^3.2.6",
"@bower_components/datatables-fixedheader" : "DataTables/FixedHeader#^3.1.5",
"@bower_components/datatables.net" : "DataTables/Dist-DataTables#>=1.10.9",
"@bower_components/datatables.net-dt" : "DataTables/Dist-DataTables-DataTables#^3.2.2",
"@bower_components/flexboxgrid" : "kristoferjoseph/flexboxgrid#^6.3.2",
"@bower_components/font-awesome" : "FortAwesome/Font-Awesome#^4.7.0",
"@bower_components/fullcalendar" : "fullcalendar/fullcalendar#^3.3.1",
"@bower_components/hammerjs" : "EightMedia/hammer.js#^2.0.8",
"@bower_components/iron-resizable-behavior" : "PolymerElements/iron-resizable-behavior#^1.0.2",
"@bower_components/iscroll" : "cubiq/iscroll#^5.2.0",
"@bower_components/jQuery-Mobile-Icon-Pack" : "commadelimited/jQuery-Mobile-Icon-Pack#*",
"@bower_components/jquery" : "jquery/jquery-dist#~2.1.4",
"@bower_components/jquery-ui" : "components/jqueryui#~1.11.4",
"@bower_components/leaflet" : "Leaflet/Leaflet#~0.7.3",
"@bower_components/leaflet.fullscreen" : "brunob/leaflet.fullscreen#^1.1.4",
"@bower_components/leaflet.locatecontrol" : "domoritz/leaflet-locatecontrol#^0.44.0",
"@bower_components/leaflet.markercluster" : "Leaflet/Leaflet.markercluster#^0.4.0",
"@bower_components/map-box" : "GNURub/mapbox-map#^0.1.6",
"@bower_components/mapbox.js" : "mapbox/mapbox.js-bower#^2.2.1",
"@bower_components/material-design-iconic-font" : "zavoloklom/material-design-iconic-font#^2.2.0",
"@bower_components/moment" : "moment/moment#^2.20.1",
"@bower_components/nativeDroid2" : "godesign/nativeDroid2#^2.0.3",
"@bower_components/noty" : "needim/noty#^3.0.1",
"@bower_components/polymer" : "Polymer/polymer#^1.1.5",
"@bower_components/webcomponentsjs" : "webcomponents/webcomponentsjs#^0.7.24",
"@bower_components/wow" : "matthieua/WOW#^1.1.2"
},
"engines" : {
"yarn" : ">= 1.0.0"
},
"scripts" : {
"postinstall" : "node -e \"try { require('fs').symlinkSync(require('path').resolve('node_modules/@bower_components'), 'bower_components', 'junction') } catch (e) { }\""
}
}
Selanjutnya lakukan perintah
bower-away --apply
Maka anda akan mendapat informasi sebagai berikut ini :
# Remove old components directory Now, please remove original components directory: $ rm -rf bower_components Please call bower-away once more when you're done with this!
Selanjutnya lakukan perintah yarn install. Kemudian ubah semua dependecy link package anda seperti awalannya adalah <link rel="stylesheet" href="bower_components/..."> menjadi <link rel="stylesheet" href="node_modules/@bower_components/..."> juga beberapa script Javascript yang telah dilink kedalam direktori bower_components berubah menjadi node_modules/@bower_components.
Sekarang anda dapat menghapus folder bower_components dan bower.json pada direktori aplikasi anda secara aman. Selamat mencoba!
Jangan lupa komen-komen bila ada kesulitan dalam menjalani tutorial ini!
