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

ឥឡូវនេះយើងបានដំឡើងភាពអាស្រ័យចាំបាច់ទាំងអស់ យើងអាចធ្វើការបង្កើតឯកសារគម្រោង និងនាំចូល 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

នៅពេលអ្នករួចរាល់ គម្រោងពេញលេញរបស់អ្នកគួរតែមើលទៅដូចនេះ៖

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

នៅចំណុចនេះ អ្វីគ្រប់យ៉ាងគឺនៅនឹងកន្លែង ប៉ុន្តែ Parcel ត្រូវការទំព័រ HTML និងអក្សរ npm ដើម្បីចាប់ផ្តើមម៉ាស៊ីនមេរបស់យើង។

កំណត់រចនាសម្ព័ន្ធកញ្ចប់

ជាមួយនឹងការដំឡើងភាពអាស្រ័យ និងថតគម្រោងរបស់យើងរួចរាល់សម្រាប់យើងចាប់ផ្តើមសរសេរកូដ ឥឡូវនេះយើងអាចកំណត់រចនាសម្ព័ន្ធ Parcel និងដំណើរការគម្រោងរបស់យើងនៅក្នុងមូលដ្ឋាន។ Parcel ខ្លួនវាមិនត្រូវការឯកសារកំណត់រចនាសម្ព័ន្ធតាមការរចនាទេ ប៉ុន្តែយើងត្រូវការអក្សរ npm និងឯកសារ 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 ហើយដំឡើង កម្មវិធីជំនួយ 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ថតនៅក្នុងស្ថានីយរបស់អ្នក សូមដំណើរការអក្សរ npm ដែលបានបន្ថែមថ្មីនោះ៖
```
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 របស់យើង សម្រាប់ព័ត៌មានលម្អិត។
នាំចូល Bootstrap's JS. បន្ថែមខាងក្រោមដើម្បី src/js/main.jsនាំចូល JS របស់ Bootstrap ទាំងអស់។ Popper នឹងត្រូវបាននាំចូលដោយស្វ័យប្រវត្តិតាមរយៈ Bootstrap ។
```
// 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 ណាមួយដែលអ្នកចង់ប្រើ។ ត្រូវប្រាកដថា ពិនិត្យមើលគម្រោងឧទាហរណ៍ Parcel ពេញលេញ សម្រាប់របៀបរួមបញ្ចូល Sass ផ្ទាល់ខ្លួនបន្ថែម និងបង្កើនប្រសិទ្ធភាពការស្ថាបនារបស់អ្នកដោយនាំចូលតែផ្នែកនៃ CSS និង JS របស់ Bootstrap ដែលអ្នកត្រូវការ។

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