Bootstrap & Parcel

ຄູ່ມືຢ່າງເປັນທາງການສໍາລັບວິທີການລວມແລະມັດ CSS ແລະ JavaScript ຂອງ Bootstrap ໃນໂຄງການຂອງທ່ານໂດຍໃຊ້ Parcel.

ໃນໜ້ານີ້

ຕ້ອງການທີ່ຈະຂ້າມໄປທີ່ສຸດ? ດາວໂຫລດຊອດໂຄດ ແລະສາທິດການເຮັດວຽກສຳລັບຄູ່ມືນີ້ຈາກ ບ່ອນເກັບຂໍ້ມູນ tws/example . ນອກນັ້ນທ່ານຍັງສາມາດ ເປີດຕົວຢ່າງໃນ StackBlitz ແຕ່ບໍ່ສາມາດດໍາເນີນການໄດ້ເພາະວ່າ Parcel ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໃນຂະນະນີ້.

ຕັ້ງຄ່າ

ພວກເຮົາກໍາລັງສ້າງໂຄງການ Parcel ດ້ວຍ Bootstrap ຕັ້ງແຕ່ເລີ່ມຕົ້ນ, ດັ່ງນັ້ນມີບາງເງື່ອນໄຂເບື້ອງຕົ້ນແລະຂັ້ນຕອນກ່ອນກ່ອນທີ່ພວກເຮົາສາມາດເລີ່ມຕົ້ນໄດ້. ຄູ່ມືນີ້ຕ້ອງການໃຫ້ທ່ານຕິດຕັ້ງ Node.js ແລະຄວາມຄຸ້ນເຄີຍກັບເຄື່ອງໃຊ້ໄຟຟ້າ.

ສ້າງໂຟນເດີໂຄງການແລະຕິດຕັ້ງ npm. ພວກເຮົາຈະສ້າງ my-projectໂຟນເດີແລະເລີ່ມຕົ້ນ npm ດ້ວຍການ -yໂຕ້ຖຽງເພື່ອຫຼີກເວັ້ນການຖາມພວກເຮົາຄໍາຖາມແບບໂຕ້ຕອບທັງຫມົດ.
```
mkdir my-project && cd my-project
npm init -y
```
ຕິດຕັ້ງ Parcel. ບໍ່ເຫມືອນກັບຄູ່ມື Webpack ຂອງພວກເຮົາ, ມີພຽງແຕ່ເຄື່ອງມືການກໍ່ສ້າງອັນດຽວຢູ່ທີ່ນີ້. Parcel ຈະຕິດຕັ້ງຕົວປ່ຽນພາສາໂດຍອັດຕະໂນມັດ (ເຊັ່ນ Sass) ເມື່ອມັນກວດພົບພວກມັນ. ພວກເຮົາໃຊ້ --save-devເພື່ອສັນຍານວ່າການເພິ່ງພາອາໄສນີ້ແມ່ນພຽງແຕ່ສໍາລັບການນໍາໃຊ້ການພັດທະນາແລະບໍ່ແມ່ນການຜະລິດ.
```
npm i --save-dev parcel
```
ຕິດຕັ້ງ Bootstrap. ຕອນນີ້ພວກເຮົາສາມາດຕິດຕັ້ງ Bootstrap ໄດ້. ພວກເຮົາຍັງຈະຕິດຕັ້ງ Popper ນັບຕັ້ງແຕ່ dropdowns ຂອງພວກເຮົາ, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມືແມ່ນຂຶ້ນກັບມັນສໍາລັບຕໍາແຫນ່ງຂອງເຂົາເຈົ້າ. ຖ້າທ່ານບໍ່ວາງແຜນທີ່ຈະໃຊ້ອົງປະກອບເຫຼົ່ານັ້ນ, ທ່ານສາມາດຍົກເລີກ Popper ຢູ່ທີ່ນີ້.
```
npm i --save bootstrap @popperjs/core
```

ຕອນນີ້ພວກເຮົາມີການຕິດຕັ້ງການເພິ່ງພາອາໄສທີ່ຈໍາເປັນທັງຫມົດ, ພວກເຮົາສາມາດເຮັດວຽກສ້າງໄຟລ໌ໂຄງການແລະນໍາເຂົ້າ Bootstrap.

ໂຄງປະກອບການ

ພວກເຮົາໄດ້ສ້າງ my-projectໂຟນເດີແລ້ວແລະເລີ່ມຕົ້ນ npm. ຕອນນີ້ພວກເຮົາຍັງຈະສ້າງ srcໂຟນເດີ, ຮູບແບບ ແລະໄຟລ໌ JavaScript ຂອງພວກເຮົາເພື່ອສະຫຼຸບໂຄງສ້າງໂຄງການ. ດໍາເນີນການຕໍ່ໄປນີ້ຈາກ my-project, ຫຼືສ້າງໂຟນເດີດ້ວຍຕົນເອງແລະໂຄງສ້າງໄຟລ໌ທີ່ສະແດງຂ້າງລຸ່ມນີ້.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

ເມື່ອທ່ານສໍາເລັດການ, ໂຄງການທີ່ສົມບູນຂອງທ່ານຄວນຈະເປັນດັ່ງນີ້:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

ໃນຈຸດນີ້, ທຸກສິ່ງທຸກຢ່າງຢູ່ໃນສະຖານທີ່ທີ່ເຫມາະສົມ, ແຕ່ Parcel ຕ້ອງການຫນ້າ HTML ແລະ npm script ເພື່ອເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍຂອງພວກເຮົາ.

ຕັ້ງຄ່າ Parcel

ດ້ວຍການຕິດຕັ້ງ dependencies ແລະໂຟນເດີ້ໂຄງການຂອງພວກເຮົາພ້ອມທີ່ຈະເລີ່ມຕົ້ນການຂຽນລະຫັດ, ພວກເຮົາສາມາດ configure Parcel ແລະດໍາເນີນການໂຄງການຂອງພວກເຮົາໃນທ້ອງຖິ່ນ. Parcel ຕົວຂອງມັນເອງບໍ່ຕ້ອງການໄຟລ໌ການຕັ້ງຄ່າໂດຍການອອກແບບ, ແຕ່ພວກເຮົາຕ້ອງການ npm script ແລະໄຟລ໌ HTML ເພື່ອເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍຂອງພວກເຮົາ.

ຕື່ມຂໍ້ມູນໃສ່ໃນ src/index.htmlໄຟລ໌. Parcel ຕ້ອງການຫນ້າທີ່ຈະສະແດງ, ດັ່ງນັ້ນພວກເຮົາໃຊ້ index.htmlຫນ້າຂອງພວກເຮົາເພື່ອຕັ້ງຄ່າ HTML ພື້ນຖານບາງຢ່າງ, ລວມທັງໄຟລ໌ CSS ແລະ JavaScript ຂອງພວກເຮົາ.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
ພວກເຮົາກໍາລັງລວມເອົາຄໍເຕົ້າໄຂ່ທີ່ Bootstrap ເລັກນ້ອຍຢູ່ທີ່ນີ້ດ້ວຍ div class="container"ແລະ <button>ເພື່ອໃຫ້ພວກເຮົາເຫັນເວລາທີ່ CSS ຂອງ Bootstrap ຖືກໂຫລດໂດຍ Webpack.

Parcel ຈະກວດພົບໂດຍອັດຕະໂນມັດວ່າພວກເຮົາກໍາລັງໃຊ້ Sass ແລະຕິດຕັ້ງ plugin Sass Parcel ເພື່ອສະຫນັບສະຫນູນມັນ. ຢ່າງໃດກໍຕາມ, ຖ້າທ່ານຕ້ອງການ, ທ່ານສາມາດດໍາເນີນການດ້ວຍຕົນເອງ npm i --save-dev @parcel/transformer-sassໄດ້.
ເພີ່ມສະຄຣິບ Parcel npm. ເປີດ package.jsonແລະເພີ່ມສະ startຄຣິບ ຕໍ່ໄປນີ້ໃສ່ scriptsວັດຖຸ. ພວກເຮົາຈະໃຊ້ສະຄຣິບນີ້ເພື່ອເລີ່ມຕົ້ນເຊີບເວີການພັດທະນາ Parcel ຂອງພວກເຮົາ ແລະສະແດງໄຟລ໌ HTML ທີ່ພວກເຮົາສ້າງຂຶ້ນຫຼັງຈາກມັນຖືກລວບລວມເຂົ້າໄປໃນໄດເລກະ distທໍລີ.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
ແລະສຸດທ້າຍ, ພວກເຮົາສາມາດເລີ່ມຕົ້ນ Parcel. ຈາກ my-projectໂຟນເດີໃນ terminal ຂອງທ່ານ, ດໍາເນີນການ npm script ທີ່ເພີ່ມໃຫມ່:
```
npm start
```

ໃນພາກຕໍ່ໄປແລະສຸດທ້າຍຂອງຄໍາແນະນໍານີ້, ພວກເຮົາຈະນໍາເຂົ້າທັງຫມົດຂອງ CSS ແລະ JavaScript ຂອງ Bootstrap.

ນໍາເຂົ້າ Bootstrap

ການນໍາເຂົ້າ Bootstrap ເຂົ້າໄປໃນ Parcel ຮຽກຮ້ອງໃຫ້ມີການນໍາເຂົ້າສອງຢ່າງ, ຫນຶ່ງເຂົ້າໄປໃນຂອງພວກເຮົາ styles.scssແລະຫນຶ່ງເຂົ້າໄປໃນຂອງພວກເຮົາ main.js.

ນໍາເຂົ້າ CSS ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/scss/styles.scssນໍາເຂົ້າ Sass ແຫຼ່ງຂອງ Bootstrap ທັງໝົດ.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ນອກນັ້ນທ່ານຍັງສາມາດນໍາເຂົ້າແຜ່ນສະໄຕລ໌ຂອງພວກເຮົາເປັນສ່ວນບຸກຄົນຖ້າຫາກວ່າທ່ານຕ້ອງການ. ອ່ານເອກະສານນໍາເຂົ້າ Sass ຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດ.
ນໍາເຂົ້າ JS ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/js/main.jsນໍາເຂົ້າ JS ຂອງ Bootstrap ທັງໝົດ. Popper ຈະຖືກນໍາເຂົ້າໂດຍອັດຕະໂນມັດຜ່ານ Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
ນອກນັ້ນທ່ານຍັງສາມາດນໍາເຂົ້າ plugins JavaScript ສ່ວນບຸກຄົນຕາມຄວາມຕ້ອງການເພື່ອຮັກສາຂະຫນາດມັດລົງ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
ອ່ານເອກະສານ JavaScript ຂອງພວກເຮົາ ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບວິທີການໃຊ້ plugins ຂອງ Bootstrap.
ແລະເຈົ້າສຳເລັດແລ້ວ! 🎉 ດ້ວຍແຫຼ່ງ Sass ແລະ JS ຂອງ Bootstrap ເຕັມທີ່, ເຊີບເວີການພັດທະນາທ້ອງຖິ່ນຂອງທ່ານຄວນຈະເປັນແບບນີ້.

ໃນປັດຈຸບັນທ່ານສາມາດເລີ່ມຕົ້ນການເພີ່ມອົງປະກອບ Bootstrap ໃດທີ່ທ່ານຕ້ອງການໃຊ້. ໃຫ້ແນ່ໃຈວ່າຈະ ກວດເບິ່ງໂຄງການຕົວຢ່າງ Parcel ທີ່ສົມບູນ ສໍາລັບວິທີການລວມເອົາ Sass ແບບກໍາຫນົດເອງເພີ່ມເຕີມແລະເພີ່ມປະສິດທິພາບການສ້າງຂອງທ່ານໂດຍການນໍາເຂົ້າພຽງແຕ່ສ່ວນຂອງ CSS ແລະ JS ຂອງ Bootstrap ທີ່ທ່ານຕ້ອງການ.

ເຫັນບາງຢ່າງຜິດພາດ ຫຼືເກົ່າຢູ່ບ່ອນນີ້ບໍ? ກະລຸນາ ເປີດບັນຫາໃນ GitHub . ຕ້ອງການຄວາມຊ່ວຍເຫຼືອໃນການແກ້ໄຂບັນຫາບໍ? ຊອກຫາ ຫຼືເລີ່ມການສົນທະນາ ໃນ GitHub.

Bootstrap & Parcel

ຕັ້ງ​ຄ່າ

ໂຄງ​ປະ​ກອບ​ການ​

ຕັ້ງຄ່າ Parcel

ນໍາເຂົ້າ Bootstrap

ຕັ້ງຄ່າ

ໂຄງປະກອບການ