bower ຄືຫຍັງ? ພ້ອມການໃຊ້ງານເບື້ອງຕົ້ນ

xangnam phiasakha
VtCamp
Published in
2 min readMay 20, 2018

ໃນການພັດທະນາເວັບໃນປັດຈຸບັນບໍ່ມີໃຜປະຕິເສດໄວ້ວ່າບໍ່ໄດ້ໃຊ້ framework ຫຼືພວກ
package ສ່ວນເສີມເຂົ້າມາຊ່ວຍໃນການພັດທະນາ ເຊັ່ນ: jquery,angurajs,bootstrap..etc. ເຊິ່ງມັນຈະຊ່ວຍໃຫ້ການພັດທະນາເວັບເປັນໄປໄດ້ຢ່າງໄວ້ ແລະ ມີປະສິດທິພາບຂຶ້ນກວ່າເກົ່າ. ສຳລັບນັດພັດທະນາທີ່ເຄີຍເຮັດ project ໃດຫນຶ່ງຜ່ານມາແລະໄດ້ໃຊ້ package ເສີມພວກນີ້ເຮັດໃຫ້ຮູ້ວ່າ ມັນໂຄດລຳຄານທີ່ຕ້ອງມານັ່ງ download unzip clone ຕ່າງໆນາໆທີ່ເຮັດໃຫ້ນັກພັດທະນາບາງຄົນທໍ້ແທ້ກັນໄປເລີຍ. ແຕ່!ດ່ຽວກ່ອນຍັງມີນົກນ້ອຍທີ່ຈະມາຊ່ວຍຈັດການບັນຫາພວກນີ້ໃຫ້ໜົດໄປຈາກຊີວິດອັນແສນສັ້ນນີ້ ນັ້ນຄື bower ພະເອກຂອງບົດຄວາມນີ້ນີເອງ

bower ຄື ?!.

ສຳລັບນັກພັດທະນາທີ່ບໍ່ເຄີຍຈັບ nodejs ຖ້າໄດ້ຍີນຄືຈະງົງວ່າມັນແມ່ນຫຍັງຫວ່ະ ເວົ້າແບບສັ້ນໆເລີຍວ່າ bowser ນັ້ນຄືໂຕທີ່ໃຊ້ຈັດການ package ຕ່າງໆທີ່ເຮົາຈະໃຊ້ພັດທະນາ application ຂອງເຮົາຢ່າງມີປະສິດທິພາບ. ຄ້າຍກັບ npm ກໍ່ວ່າໄດ້bower ຖືກພັດທະນາໂດຍ Twitter ເພື່ອໃຊ້ຈັດການກັບ Dependency ຂອງ
ໂປຣເຈັກ.

ການໃຊ້ bower ເບື້ອງຕົ້ນ

ສຳລັບການໃຊ້ bower ກໍ່ແມ່ນເລື່ຶງຍາກເຢັນຫຍັງເລິຍກ່ອນອື່ນຕ້ອງຕິດຕັ້ງ bower ກ່ອນໂດຍຕິດຕັ້ງຜ່ານທາງ nmp ດ່ວຍຄຳສັ່ງ

$ npm install -g bower

ເທົ່ານີ້ເຮົາກໍ່ສາມາດໃຊ້ໄດ້ແລ້ວ. ທົດສອບຕິດຕັ້ງ jquery ໂດຍການຕິດຕັ້ງຜ່ານ command line

$ bower install jquery

ພຽງເທົ່ານີ້ເຮົາກໍ່ສາມາດໃຊ bower ໄດ້ແລ້ວ ແລະເຮົາຈະໄດ້ folder bower_components ແຕ່ເຮົາສາມາດປ່ຽນຊື່ໄດ້ ແລະເອີ້ນໃຊ້ດັ່ງນີ້

$ <script src="bower_components/jquery/dist/jquery.min.js"></script>

bower.json ແລະ .bowerrc (dot file)

bower.json ເປັນ file ທີ່ໃຊ້ເກັບຂໍ້ມູນຕິດຕັ້ງ package ຂອງ bower
ມີຫນ້າຕາປະມານນີ້

{
"name": "cloudlaos",
"version": "1.1.0",
"homepage": "https://colorlib.com/polygon/gentelella/index.html",
"authors": [
"Aigars Silkalns"
],
"description": "Gentellela Admin is a free to use Bootstrap admin template",
"keywords": [
"css",
"js",
"html",
"template",
"admin",
"bootstrap",
"theme",
"backend",
"responsive"
],
"license": "MIT",
"ignore": [
"**/.*",
"documentation"
],
"devDependencies": {
"jquery": "^2.2.3",
"bootstrap": "^3.3.6",
"jQuery-Smart-Wizard": "^3.3.1",
"dropzone": "^4.3.0",
"pnotify": "^3.0.0",
"fullcalendar": "^2.6.1",
"jquery.easy-pie-chart": "^2.1.6",
"starrr": "^2.0.0",
"pdfmake": "^0.1.20",
"jszip": "Stuk/jszip#v2.6.0",
"echarts": "^3.1.7",
"malihu-custom-scrollbar-plugin": "^3.1.3"
}
}

ເຮົາສາມາດສ້າງ file ນີ້ໄດ້ໂດຍການ run command bower init ແລະປ້ອນຂໍ້ມູນຕ່າງໆກ່ຽວກັບ project ທີ່ເຮົາຈະສ້າງຂຶ້ນ.

.browerrc ເປັນ file ທີ່ໃຊ້ໃນການ config bower ເຊັ່ນ:timeout,ຕ້ອງການໃຫ້ bower ເກັບ package ເສີມໄວ້ຢູ່ທີ່ folder ໃດ ເຊິງໂດຍ default ມັນເກັບໄວ້ທີ່ bower_components ຕົວຢ່າງວ່າຜູ້ຂຽນຕ້ອງການເກັບໄວ້ທີ່ disk ຈິ່ງ config ດັ່ງນີ້.

{
"directory": "disk"
}

ເມື່ອຕິດຕັ້ງ package ເສີມມັນຈະຖືກເກັບໄວ້ທີ່ disk ນອກນີ້ຍັງມີການຕັ້ງຄ່າຕ່າງໆເຊິ່ງສາມາດເບິ່ງໄດ້ທີ່ Bower configured.

ສະຫຼຸບ

ເຮົາສາມາດໃຊ້ bower ໃນການບໍລິຫານການຕິດຕັ້ງພວກ framework ຕ່າງໆ
ເຊິ່ງມັນເຮັດໃຫ້ບໍ່ຕ້ອງເສຍເວລາໄປເລາະເຂົ້າເວັບໂຫຼດນັ້ນໂຫຼດນີ້.ໂຫຼດແລ້ວຍັງມາແຕກ
zip file ເຮັດໃຫ້ມັນຫນ້າລຳຄານ. ນອກນີ້ຍັງສາມາດກວດສອບເບິ່ງ package
ທີ່ໄດ້ຮັບຄວາມນິຍົມສູງໄດ້ທີ Bower package ສາມາດເບິ່ງຂໍ້ມູນເພີ່ມເຕີມໄດ້ທີ່ Bower.io.

--

--