ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

ປະກອບສ່ວນ

ຊ່ວຍພັດທະນາ Bootstrap ດ້ວຍເອກະສານຂອງພວກເຮົາສ້າງສະຄຣິບ ແລະການທົດສອບ.

ໃນໜ້ານີ້

ການ​ຕັ້ງ​ຄ່າ​ເຄື່ອງ​ມື​

Bootstrap ໃຊ້ npm scripts ເພື່ອສ້າງເອກະສານແລະລວບລວມໄຟລ໌ແຫຼ່ງ. package.json ຂອງພວກເຮົາ ມີສະຄຣິບເຫຼົ່ານີ້ສໍາລັບການລວບລວມລະຫັດ, ການທົດສອບແລ່ນ, ແລະອື່ນໆອີກ. ສິ່ງເຫຼົ່ານີ້ບໍ່ໄດ້ມີຈຸດປະສົງເພື່ອໃຊ້ນອກບ່ອນເກັບມ້ຽນ ແລະເອກະສານຂອງພວກເຮົາ.

ເພື່ອນໍາໃຊ້ລະບົບການກໍ່ສ້າງຂອງພວກເຮົາແລະດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນ, ທ່ານຈະຕ້ອງການສໍາເນົາຂອງໄຟລ໌ຕົ້ນສະບັບຂອງ Bootstrap ແລະ Node. ປະຕິບັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້ແລະທ່ານຄວນກຽມພ້ອມທີ່ຈະ rock:

  1. ດາວໂຫຼດ ແລະຕິດຕັ້ງ Node.js , ທີ່ພວກເຮົາໃຊ້ເພື່ອຈັດການການຂຶ້ນກັບຂອງພວກເຮົາ.
  2. ດາວໂຫລດແຫຼ່ງຂອງ Bootstrap ຫຼື fork ເກັບຮັກສາຂອງ Bootstrap .
  3. ທ່ອງໄປຫາໄດເລກະທໍລີຮາກ /bootstrapແລະແລ່ນ npm installເພື່ອຕິດຕັ້ງການຂື້ນກັບທ້ອງຖິ່ນຂອງພວກເຮົາທີ່ລະບຸໄວ້ໃນ package.json .

ເມື່ອສໍາເລັດ, ທ່ານຈະສາມາດດໍາເນີນການຄໍາສັ່ງຕ່າງໆທີ່ສະຫນອງໃຫ້ຈາກເສັ້ນຄໍາສັ່ງ.

ໃຊ້ npm scripts

package.json ຂອງພວກເຮົາ ປະກອບມີວຽກງານຈໍານວນຫລາຍສໍາລັບການພັດທະນາໂຄງການ. ແລ່ນ npm runເພື່ອເບິ່ງສະຄຣິບ npm ທັງໝົດໃນເຄື່ອງຂອງທ່ານ. ວຽກ​ງານ​ຕົ້ນ​ຕໍ​ປະ​ກອບ​ມີ​:

ວຽກງານ ລາຍລະອຽດ
npm start ລວບລວມ CSS ແລະ JavaScript, ສ້າງເອກະສານ, ແລະເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍທ້ອງຖິ່ນ.
npm run dist ສ້າງໄດເລກະ dist/ທໍລີດ້ວຍໄຟລ໌ທີ່ລວບລວມ. ໃຊ້ Sass , Autoprefixer , ແລະ terser .
npm test ແລ່ນການທົດສອບໃນທ້ອງຖິ່ນຫຼັງຈາກແລ່ນnpm run dist
npm run docs-serve ສ້າງ ແລະດໍາເນີນການເອກະສານຢູ່ໃນທ້ອງຖິ່ນ.
ເລີ່ມຕົ້ນດ້ວຍ Bootstrap ຜ່ານ npm ກັບໂຄງການເລີ່ມຕົ້ນຂອງພວກເຮົາ! ໄປທີ່ ບ່ອນເກັບແມ່ແບບ tws/bootstrap-npm-starter ເພື່ອເບິ່ງວິທີສ້າງ ແລະປັບແຕ່ງ Bootstrap ໃນໂຄງການ npm ຂອງທ່ານເອງ. ລວມມີ Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ແລະ Bootstrap Icons.

ຊາສ

Bootstrap ໃຊ້ Dart Sass ສໍາລັບການລວບລວມໄຟລ໌ແຫຼ່ງ Sass ຂອງພວກເຮົາເຂົ້າໄປໃນໄຟລ໌ CSS (ລວມຢູ່ໃນຂະບວນການສ້າງຂອງພວກເຮົາ), ແລະພວກເຮົາແນະນໍາໃຫ້ທ່ານເຮັດເຊັ່ນດຽວກັນຖ້າທ່ານກໍາລັງລວບລວມ Sass ໂດຍໃຊ້ທໍ່ຊັບສິນຂອງທ່ານເອງ. ໃນເມື່ອກ່ອນພວກເຮົາເຄີຍໃຊ້ Node Sass ສໍາລັບ Bootstrap v4, ແຕ່ LibSass ແລະແພັກເກັດທີ່ສ້າງຂຶ້ນຢູ່ເທິງສຸດຂອງມັນ, ລວມທັງ Node Sass, ຕອນນີ້ ຖືກຍົກເລີກ ແລ້ວ .

Dart Sass ໃຊ້ຄວາມແມ່ນຍໍາຂອງຮອບຂອງ 10 ແລະສໍາລັບເຫດຜົນປະສິດທິພາບບໍ່ອະນຸຍາດໃຫ້ປັບຄ່ານີ້. ພວກເຮົາບໍ່ຫຼຸດຄວາມແມ່ນຍໍານີ້ໃນລະຫວ່າງການປະມວນຜົນເພີ່ມເຕີມຂອງ CSS ທີ່ສ້າງຂຶ້ນຂອງພວກເຮົາ, ເຊັ່ນວ່າໃນລະຫວ່າງການ minification, ແຕ່ຖ້າຫາກວ່າທ່ານເລືອກທີ່ຈະເຮັດແນວນັ້ນ, ພວກເຮົາແນະນໍາໃຫ້ຮັກສາຄວາມແມ່ນຍໍາຂອງຢ່າງຫນ້ອຍ 6 ເພື່ອປ້ອງກັນບັນຫາກ່ຽວກັບການ rounding ຂອງຕົວທ່ອງເວັບ.

ຕົວນຳໜ້າອັດຕະໂນມັດ

Bootstrap ໃຊ້ Autoprefixer (ລວມຢູ່ໃນຂະບວນການສ້າງຂອງພວກເຮົາ) ເພື່ອເພີ່ມຄໍານໍາຫນ້າຂອງຜູ້ຂາຍໂດຍອັດຕະໂນມັດກັບບາງຄຸນສົມບັດ CSS ໃນເວລາສ້າງ. ການເຮັດດັ່ງນັ້ນຊ່ວຍປະຢັດເວລາແລະລະຫັດຂອງພວກເຮົາໂດຍການອະນຸຍາດໃຫ້ພວກເຮົາຂຽນສ່ວນທີ່ສໍາຄັນຂອງ CSS ຂອງພວກເຮົາໃນເວລາດຽວໃນຂະນະທີ່ກໍາຈັດຄວາມຕ້ອງການຂອງຜູ້ຈໍາຫນ່າຍ mixins ຄືກັບທີ່ພົບໃນ v3.

ພວກເຮົາຮັກສາບັນຊີລາຍຊື່ຂອງຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນໂດຍຜ່ານ Autoprefixer ໃນໄຟລ໌ແຍກຕ່າງຫາກພາຍໃນບ່ອນເກັບມ້ຽນ GitHub ຂອງພວກເຮົາ. ເບິ່ງ .browserslistrc ສໍາລັບລາຍລະອຽດ.

RTLCSS

Bootstrap ໃຊ້ RTLCSS ເພື່ອປະມວນຜົນ CSS ທີ່ຖືກລວບລວມແລະປ່ຽນພວກມັນເປັນ RTL - ໂດຍພື້ນຖານແລ້ວປ່ຽນຄຸນສົມບັດການຮັບຮູ້ທິດທາງແນວນອນ (ຕົວຢ່າງ padding-left) ກັບກົງກັນຂ້າມຂອງພວກເຂົາ. ມັນອະນຸຍາດໃຫ້ພວກເຮົາຂຽນ CSS ຂອງພວກເຮົາພຽງແຕ່ຄັ້ງດຽວແລະເຮັດໃຫ້ການປັບຕົວເລັກນ້ອຍໂດຍໃຊ້ຄໍາສັ່ງ ຄວບຄຸມ RTLCSS ແລະ ມູນຄ່າ .

ເອກະສານທ້ອງຖິ່ນ

ການດໍາເນີນການເອກະສານຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນຮຽກຮ້ອງໃຫ້ມີການນໍາໃຊ້ Hugo, ເຊິ່ງໄດ້ຮັບການຕິດຕັ້ງຜ່ານຊຸດ hugo-bin npm. Hugo ເປັນຕົວສ້າງເວັບໄຊແບບຄົງທີ່ໄວ ແລະຂ້ອນຂ້າງຂະຫຍາຍໄດ້ທີ່ສະໜອງໃຫ້ພວກເຮົາ: ພື້ນຖານປະກອບມີ, ໄຟລ໌ທີ່ອີງໃສ່ Markdown, ແມ່ແບບ, ແລະອື່ນໆອີກ. ນີ້ແມ່ນວິທີການເລີ່ມຕົ້ນມັນ:

  1. ດໍາເນີນການຜ່ານການ ຕິດຕັ້ງເຄື່ອງມື ຂ້າງເທິງເພື່ອຕິດຕັ້ງການຂຶ້ນກັບທັງຫມົດ.
  2. /bootstrapຈາກໄດເລກະ ທໍລີ ຮາກ , ດໍາເນີນການ npm run docs-serveໃນເສັ້ນຄໍາສັ່ງ.
  3. ເປີດ http://localhost:9001/ໃນຕົວທ່ອງເວັບຂອງທ່ານ, ແລະvoilà.

ຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການໃຊ້ Hugo ໂດຍການອ່ານ ເອກະສານ ຂອງມັນ .

ການແກ້ໄຂບັນຫາ

ຖ້າເຈົ້າພົບບັນຫາກັບການຕິດຕັ້ງ dependency, ຖອນການຕິດຕັ້ງທຸກລຸ້ນທີ່ຂຶ້ນກັບກ່ອນໜ້ານີ້ (ທົ່ວໂລກ ແລະທ້ອງຖິ່ນ). ຫຼັງ​ຈາກ​ນັ້ນ​, rerun npm install.