Bootstrap & Vite

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

ໃນໜ້ານີ້

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

ຕັ້ງຄ່າ

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

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

ຕອນນີ້ພວກເຮົາມີການຕິດຕັ້ງແລະຕິດຕັ້ງການເພິ່ງພາອາໄສທີ່ຈໍາເປັນທັງຫມົດ, ພວກເຮົາສາມາດເຮັດວຽກສ້າງໄຟລ໌ໂຄງການແລະນໍາເຂົ້າ 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 vite.config.js

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

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

ໃນຈຸດນີ້, ທຸກສິ່ງທຸກຢ່າງຢູ່ໃນສະຖານທີ່ທີ່ເຫມາະສົມ, ແຕ່ Vite ຈະບໍ່ເຮັດວຽກເພາະວ່າພວກເຮົາຍັງບໍ່ໄດ້ຕື່ມຂໍ້ມູນໃສ່ໃນຂອງພວກເຮົາ vite.config.jsເທື່ອ.

ຕັ້ງຄ່າ Vite

ດ້ວຍການຕິດຕັ້ງ dependencies ແລະໂຟນເດີ້ໂຄງການຂອງພວກເຮົາພ້ອມທີ່ຈະເລີ່ມຕົ້ນການຂຽນລະຫັດ, ພວກເຮົາສາມາດ configure Vite ແລະດໍາເນີນການໂຄງການຂອງພວກເຮົາຢູ່ໃນທ້ອງຖິ່ນ.

ເປີດ vite.config.jsໃນບັນນາທິການຂອງທ່ານ. ເນື່ອງຈາກມັນຫວ່າງເປົ່າ, ພວກເຮົາຈະຕ້ອງເພີ່ມການຕັ້ງຄ່າ boilerplate ບາງຢ່າງໃສ່ມັນເພື່ອໃຫ້ພວກເຮົາສາມາດເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍຂອງພວກເຮົາໄດ້. ພາກສ່ວນນີ້ຂອງ config ບອກ Vite ເພື່ອຊອກຫາ JavaScript ຂອງໂຄງການຂອງພວກເຮົາແລະວິທີການທີ່ເຄື່ອງແມ່ຂ່າຍຂອງການພັດທະນາຄວນຈະປະຕິບັດ (ດຶງອອກຈາກ srcໂຟນເດີທີ່ມີການໂຫຼດໃຫມ່ຮ້ອນ).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
ຕໍ່ໄປ, ພວກເຮົາຕື່ມຂໍ້ມູນໃສ່ src/index.html. ນີ້ແມ່ນຫນ້າ HTML Vite ຈະໂຫລດໃນຕົວທ່ອງເວັບເພື່ອນໍາໃຊ້ CSS ທີ່ຖືກມັດໄວ້ແລະ JS ພວກເຮົາຈະເພີ່ມໃສ່ມັນໃນຂັ້ນຕອນຕໍ່ມາ.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
ພວກເຮົາກໍາລັງລວມເອົາຄໍເຕົ້າໄຂ່ທີ່ Bootstrap ເລັກນ້ອຍຢູ່ທີ່ນີ້ດ້ວຍ div class="container"ແລະ <button>ເພື່ອໃຫ້ພວກເຮົາເຫັນເວລາທີ່ CSS ຂອງ Bootstrap ຖືກໂຫລດໂດຍ Vite.
ໃນປັດຈຸບັນພວກເຮົາຕ້ອງການ npm script ເພື່ອດໍາເນີນການ Vite. ເປີດ package.jsonແລະເພີ່ມສະ startຄິບທີ່ສະແດງຂ້າງລຸ່ມນີ້ (ທ່ານຄວນມີສະຄິບທົດສອບແລ້ວ). ພວກເຮົາຈະໃຊ້ສະຄຣິບນີ້ເພື່ອເລີ່ມເຊີບເວີ Vite dev ທ້ອງຖິ່ນຂອງພວກເຮົາ.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ແລະສຸດທ້າຍ, ພວກເຮົາສາມາດເລີ່ມຕົ້ນ Vite. ຈາກ my-projectໂຟນເດີໃນ terminal ຂອງທ່ານ, ດໍາເນີນການ npm script ທີ່ເພີ່ມໃຫມ່:
```
npm start
```

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

ນໍາເຂົ້າ Bootstrap

ຕັ້ງຄ່າການນໍາເຂົ້າ Sass ຂອງ Bootstrap ໃນ vite.config.js. ຕອນນີ້ໄຟລ໌ການຕັ້ງຄ່າຂອງທ່ານສຳເລັດແລ້ວ ແລະຄວນຈະກົງກັບສະນິບເພັດຂ້າງລຸ່ມນີ້. ສ່ວນໃຫມ່ພຽງແຕ່ນີ້ແມ່ນ resolveສ່ວນ - ພວກເຮົາໃຊ້ນີ້ເພື່ອເພີ່ມນາມແຝງກັບໄຟລ໌ແຫຼ່ງຂອງພວກເຮົາພາຍໃນ node_modulesເພື່ອເຮັດໃຫ້ການນໍາເຂົ້າງ່າຍດາຍເທົ່າທີ່ເປັນໄປໄດ້.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
ຕອນນີ້, ໃຫ້ນໍາເຂົ້າ CSS ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/scss/styles.scssນໍາເຂົ້າ Sass ແຫຼ່ງຂອງ Bootstrap ທັງໝົດ.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ນອກນັ້ນທ່ານຍັງສາມາດນໍາເຂົ້າແຜ່ນສະໄຕລ໌ຂອງພວກເຮົາເປັນສ່ວນບຸກຄົນຖ້າຫາກວ່າທ່ານຕ້ອງການ. ອ່ານເອກະສານນໍາເຂົ້າ Sass ຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດ.
ຕໍ່ໄປພວກເຮົາໂຫລດ CSS ແລະນໍາເຂົ້າ JavaScript ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/js/main.jsໂຫລດ CSS ແລະນໍາເຂົ້າ JS ຂອງ Bootstrap ທັງຫມົດ. Popper ຈະຖືກນໍາເຂົ້າໂດຍອັດຕະໂນມັດຜ່ານ Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 ໃດທີ່ທ່ານຕ້ອງການໃຊ້. ໃຫ້ແນ່ໃຈວ່າຈະ ກວດເບິ່ງໂຄງການຕົວຢ່າງ Vite ຄົບຖ້ວນ ສໍາລັບວິທີການລວມເອົາ Sass ແບບ custom ເພີ່ມເຕີມແລະເພີ່ມປະສິດທິພາບການສ້າງຂອງທ່ານໂດຍການນໍາເຂົ້າພຽງແຕ່ສ່ວນຂອງ CSS ແລະ JS ຂອງ Bootstrap ທີ່ທ່ານຕ້ອງການ.

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

Bootstrap & Vite

ຕັ້ງ​ຄ່າ

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

ຕັ້ງຄ່າ Vite

ນໍາເຂົ້າ Bootstrap

ຕັ້ງຄ່າ

ໂຄງປະກອບການ