Боотстрап & Парцел

Званични водич за то како да укључите и повежете Боотстрап-ов ЦСС и ЈаваСцрипт у свој пројекат користећи Парцел.

На овој страници

Желите да прескочите до краја? Преузмите изворни код и радну демонстрацију за овај водич из твбс/екамплес спремишта . Такође можете да отворите пример у СтацкБлитз-у, али не и да га покренете јер Парцел тамо тренутно није подржан.

Подесити

Градимо пројекат Парцел са Боотстрапом од нуле, тако да постоје неки предуслови и први кораци пре него што заиста почнемо. Овај водич захтева да имате инсталиран Ноде.јс и да сте упознати са терминалом.

Направите фасциклу пројекта и подесите нпм. Направићемо my-projectфасциклу и иницијализовати нпм са -yаргументом како бисмо избегли да нам поставља сва интерактивна питања.
```
mkdir my-project && cd my-project
npm init -y
```
Инсталирајте Парцел. За разлику од нашег Вебпацк водича, овде постоји само једна зависност од алата за прављење. Парцел ће аутоматски инсталирати језичке трансформаторе (као што је Сасс) када их открије. Користимо --save-devда сигнализирамо да је ова зависност само за развојну употребу, а не за производњу.
```
npm i --save-dev parcel
```
Инсталирајте Боотстрап. Сада можемо да инсталирамо Боотстрап. Такође ћемо инсталирати Поппер пошто наши падајући мении, искачући огласи и описи алата зависе од тога за њихово позиционирање. Ако не планирате да користите те компоненте, овде можете изоставити Попера.
```
npm i --save bootstrap @popperjs/core
```

Сада када имамо инсталиране све неопходне зависности, можемо да се бавимо креирањем пројектних датотека и увозом Боотстрапа.

Структура пројекта

Већ смо креирали my-projectфасциклу и иницијализовали нпм. Сада ћемо такође креирати нашу srcфасциклу, стилове и ЈаваСцрипт датотеку да бисмо заокружили структуру пројекта. Покрените следеће из 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

У овом тренутку, све је на правом месту, али Парцелу је потребна ХТМЛ страница и нпм скрипта за покретање нашег сервера.

Конфигуришите парцелу

Са инсталираним зависностима и нашом фасциклом пројекта спремном за почетак кодирања, сада можемо да конфигуришемо Парцел и да покренемо наш пројекат локално. Сама парцела не захтева конфигурациони фајл по дизајну, али нам је потребна нпм скрипта и ХТМЛ датотека за покретање нашег сервера.

Попуните src/index.htmlдатотеку. Парцелу је потребна страница за приказивање, тако да користимо нашу index.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>
```
Овде укључујемо мало Боотстрап стилизовања са div class="container"и <button>тако да видимо када се Боотстрап ЦСС учитава од стране Вебпацк-а.

Парцел ће аутоматски открити да користимо Сасс и инсталирати Сасс Парцел додатак како би га подржао. Међутим, ако желите, можете и ручно покренути npm i --save-dev @parcel/transformer-sass.
Додајте Парцел нпм скрипте. Отворите package.jsonи додајте следећу startскрипту у scriptsобјекат. Користићемо ову скрипту да покренемо наш Парцел развојни сервер и прикажемо ХТМЛ датотеку коју смо креирали након што је преведена у distдиректоријум.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
И коначно, можемо покренути Парцел. Из my-projectфасцикле у вашем терминалу покрените ту новододату нпм скрипту:
```
npm start
```

У следећем и последњем одељку овог водича, ми ћемо увести све Боотстрап-ове ЦСС и ЈаваСцрипт.

Увези Боотстрап

Увоз Боотстрапа у Парцел захтева два увоза, један у наш styles.scssи један у наш main.js.

Увезите Боотстрап-ов ЦСС. Додајте следеће да src/scss/styles.scssбисте увезли све изворне Сасс Боотстрапа.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Такође можете да увезете наше стилове појединачно ако желите. Прочитајте наше Сасс увозне документе за детаље.
Увезите Боотстрап-ов ЈС. Додајте следеће у да src/js/main.jsбисте увезли све Боотстрап-ове ЈС. Поппер ће бити аутоматски увезен преко Боотстрапа.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Такође можете да увезете ЈаваСцрипт додатке појединачно по потреби да бисте смањили величине пакета:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Прочитајте наше ЈаваСцрипт документе за више информација о томе како да користите Боотстрап додатке.
И готови сте! 🎉 Када су изворни Сасс и ЈС Боотстрап потпуно учитани, ваш локални развојни сервер би сада требао изгледати овако.

Сада можете да почнете да додајете све Боотстрап компоненте које желите да користите. Обавезно погледајте комплетан пример пројекта Парцел да бисте сазнали како да укључите додатни прилагођени Сасс и оптимизујете своју верзију увозом само делова Боотстрап-овог ЦСС-а и ЈС-а који су вам потребни.

Видите овде нешто погрешно или застарело? Отворите проблем на ГитХуб-у . Потребна вам је помоћ у решавању проблема? Претражите или започните дискусију на ГитХуб-у.