Bootstrap & Parcel

Parcel көмегімен жобаңызға Bootstrap CSS және JavaScript қосу және жинақтау туралы ресми нұсқаулық.

Бұл бетте

Соңына дейін өткізгіңіз келе ме? Бұл нұсқаулықтың бастапқы кодын және жұмыс демонстрациясын 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 конфигурациялау

Тәуелділіктер орнатылған және жоба қалтамыз кодтауды бастауға дайын болса, біз енді Parcel конфигурациясын және жобамызды жергілікті түрде іске қоса аламыз. Parcel өзі дизайн бойынша конфигурация файлын қажет етпейді, бірақ серверді іске қосу үшін бізге npm сценарийі мен HTML файлы қажет.

src/index.htmlФайлды толтырыңыз . Parcel көрсету үшін бет қажет, сондықтан біз index.htmlCSS және JavaScript файлдарын қоса, кейбір негізгі HTML параметрлерін орнату үшін бетті пайдаланамыз.
```
<!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 сайтында іздеу немесе талқылауды бастау .