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 ផងដែរ ចាប់តាំងពីការទម្លាក់ចុះ ការលេចឡើង និងព័ត៌មានជំនួយរបស់យើងអាស្រ័យលើវាសម្រាប់ទីតាំងរបស់ពួកគេ។ ប្រសិនបើអ្នកមិនមានគម្រោងប្រើសមាសធាតុទាំងនោះទេ អ្នកអាចលុបចោល Popper នៅទីនេះ។
```
npm i --save bootstrap @popperjs/core
```
ដំឡើងភាពអាស្រ័យបន្ថែម។ បន្ថែមពីលើ Vite និង Bootstrap យើងត្រូវការភាពអាស្រ័យមួយផ្សេងទៀត (Sass) ដើម្បីនាំចូល និងបាច់ CSS របស់ Bootstrap ឱ្យបានត្រឹមត្រូវ។
```
npm i --save-dev sass
```

ឥឡូវនេះ យើងបានដំឡើង និងដំឡើងភាពអាស្រ័យចាំបាច់ទាំងអស់ យើងអាចធ្វើការបង្កើតឯកសារគម្រោង និងនាំចូល Bootstrap ។

រចនាសម្ព័ន្ធគម្រោង

យើងបានបង្កើត my-projectFolder និងចាប់ផ្តើម 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

ជាមួយនឹងការដំឡើងភាពអាស្រ័យ និងថតគម្រោងរបស់យើងរួចរាល់សម្រាប់យើងក្នុងការចាប់ផ្តើមសរសេរកូដ ឥឡូវនេះយើងអាចកំណត់រចនាសម្ព័ន្ធ Vite និងដំណើរការគម្រោងរបស់យើងនៅក្នុងមូលដ្ឋាន។

បើក vite.config.jsនៅក្នុងកម្មវិធីនិពន្ធរបស់អ្នក។ ដោយសារវាទទេ យើងនឹងត្រូវបន្ថែមការកំណត់រចនាសម្ព័ន្ធ boilerplate មួយចំនួនទៅវា ដូច្នេះយើងអាចចាប់ផ្តើមម៉ាស៊ីនមេរបស់យើង។ ផ្នែកនៃការកំណត់នេះប្រាប់ 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 ដើម្បីដំណើរការ Vite ។ បើក package.jsonនិងបន្ថែម startស្គ្រីបដែលបង្ហាញខាងក្រោម (អ្នកគួរតែមានស្គ្រីបសាកល្បងរួចហើយ)។ យើងនឹងប្រើស្គ្រីបនេះដើម្បីចាប់ផ្តើមម៉ាស៊ីនមេ Vite dev ក្នុងតំបន់របស់យើង។
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ហើយចុងក្រោយ យើងអាចចាប់ផ្តើម Vite បាន។ ពី my-projectថតនៅក្នុងស្ថានីយរបស់អ្នក សូមដំណើរការអក្សរ npm ដែលបានបន្ថែមថ្មីនោះ៖
```
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'
```
អ្នកក៏អាចនាំចូលកម្មវិធីជំនួយ JavaScript ជាលក្ខណៈបុគ្គលតាមតម្រូវការ ដើម្បីរក្សាទំហំកញ្ចប់ចុះក្រោម៖
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
សូមអានឯកសារ JavaScript របស់យើង សម្រាប់ព័ត៌មានបន្ថែមអំពីរបៀបប្រើកម្មវិធីជំនួយរបស់ Bootstrap ។
ហើយអ្នករួចរាល់ហើយ! 🎉 ជាមួយនឹងប្រភពរបស់ Bootstrap Sass និង JS ត្រូវបានផ្ទុកយ៉ាងពេញលេញ នោះម៉ាស៊ីនមេអភិវឌ្ឍន៍មូលដ្ឋានរបស់អ្នកឥឡូវនេះគួរតែមើលទៅដូចនេះ។

ឥឡូវនេះអ្នកអាចចាប់ផ្តើមបន្ថែមសមាសធាតុ Bootstrap ណាមួយដែលអ្នកចង់ប្រើ។ ត្រូវប្រាកដថា ពិនិត្យមើលគម្រោងឧទាហរណ៍ Vite ពេញលេញ សម្រាប់របៀបបញ្ចូល Sass ផ្ទាល់ខ្លួនបន្ថែម និងបង្កើនប្រសិទ្ធភាពការស្ថាបនារបស់អ្នកដោយនាំចូលតែផ្នែកនៃ CSS និង JS របស់ Bootstrap ដែលអ្នកត្រូវការ។

ឃើញអ្វីខុស ឬហួសសម័យនៅទីនេះ? សូម បើកបញ្ហានៅលើ GitHub ។ ត្រូវការជំនួយក្នុងការដោះស្រាយបញ្ហា? ស្វែងរក ឬចាប់ផ្តើមការពិភាក្សា នៅលើ GitHub ។