Bootstrap & Parcel

Bootstrap'тин CSS жана JavaScript'ти Parcel аркылуу долбооруңузга кантип кошуу жана таңгактоо боюнча расмий колдонмо.

Бул бетте

Аягына чейин өткүңүз келеби? Бул колдонмонун баштапкы кодун жана жумушчу демонстрациясын twbs/examples репозиторийинен жүктөп алыңыз . Ошондой эле мисалды StackBlitzте ачсаңыз болот , бирок аны иштете албайсыз, анткени Parcel учурда ал жерде колдоого алынбайт.

Жайгашуу

Биз нөлдөн баштап Bootstrap менен Parcel долбоорун куруп жатабыз, андыктан чындап баштоого чейин кээ бир өбөлгөлөр жана алдыңкы кадамдар бар. Бул колдонмо сизден 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 орното алабыз. Попперди да орнотобуз, анткени биздин ачылуучу тизмелерибиз, попоперлерибиз жана кеңештерибиз алардын жайгашуусуна көз каранды. Эгер сиз ал компоненттерди колдонууну пландабасаңыз, анда Попперди бул жерден калтырсаңыз болот.
```
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 скрипти керек.

Парцелди конфигурациялоо

Көз карандылык орнотулуп, долбоор папкабыз коддоону баштоого даяр болгондо, эми биз 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>Bootstrap'тын CSS качан 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
```

Бул колдонмонун кийинки жана акыркы бөлүмүндө биз Bootstrapтын бардык CSS жана JavaScriptтерин импорттойбуз.

Bootstrap импорттоо

Bootstrapти Parcelге импорттоо эки импортту талап кылат, бири биздин styles.scssжана экинчиси биздин main.js.

Bootstrap CSS импорттоо. src/scss/styles.scssБардык Bootstrap булагы Sass импорттоо үчүн төмөнкүнү кошуңуз .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Кааласаңыз, стилдер жадыбалыбызды өз алдынча импорттой аласыз. Чоо-жайын билүү үчүн Sass импорттук документтерибизди окуңуз .
Bootstrap'тин JS импорттоо. src/js/main.jsБардык Bootstrap JS импорттоо үчүн төмөнкүнү кошуңуз . Поппер автоматтык түрдө 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'
```
Bootstrap плагиндерин кантип колдонуу керектиги жөнүндө көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди окуңуз .
А сен бүттүң! 🎉 Bootstrap булагы Sass жана JS толук жүктөлгөндө, сиздин жергиликтүү өнүктүрүү сервериңиз азыр ушундай болушу керек.

Эми сиз колдонгуңуз келген каалаган Bootstrap компоненттерин кошо баштасаңыз болот. Кошумча ыңгайлаштырылган Sass кошуу жана Bootstrap'тын CSS жана JS бөлүктөрүн гана импорттоо менен курууну оптималдаштыруу үчүн Parcel үлгүсүнүн толук долбоорун текшериңиз .

Бул жерден туура эмес же эскирип калган нерсени көрүп жатасызбы? Сураныч , GitHubда маселени ачыңыз . Мүчүлүштүктөрдү аныктоого жардам керекпи? GitHub'да издеңиз же талкуу баштаңыз .