Bootstrap & Parcel

Официјален водич за тоа како да вклучите и да ги соберете CSS и JavaScript на Bootstrap во вашиот проект користејќи Parcel.

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

Сакате да прескокнете до крај? Преземете го изворниот код и работната демо за овој водич од складиштето twbs/examps . Можете исто така да го отворите примерот во StackBlitz , но да не го извршите бидејќи Parcel моментално не е поддржан таму.

Поставување

Градиме проект Parcel со Bootstrap од нула, така што има некои предуслови и чекори пред навистина да започнеме. Овој водич бара од вас да имате инсталирано Node.js и блискост со терминалот.

Направете проектна папка и поставете npm. Ќе ја создадеме my-projectпапката и ќе го иницијализираме npm со -yаргументот за да избегнеме да ни ги поставува сите интерактивни прашања.
```
mkdir my-project && cd my-project
npm init -y
```
Инсталирајте парцела. За разлика од нашиот водич за Webpack, овде има само една зависност од алатката за градење. Parcel автоматски ќе инсталира јазични трансформатори (како Sass) додека ги детектира. Ние користиме --save-devза да сигнализираме дека оваа зависност е само за развојна употреба, а не за производство.
```
npm i --save-dev parcel
```
Инсталирајте Bootstrap. Сега можеме да инсталираме Bootstrap. Ќе го инсталираме и Popper бидејќи нашите спуштања, поповери и совети за алатки зависат од него за нивното позиционирање. Ако не планирате да ги користите тие компоненти, можете да го испуштите Popper овде.
```
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датотеката. На парцелата му треба страница за прикажување, па затоа ја користиме нашата 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објектот. Ќе ја користиме оваа скрипта за да го стартуваме нашиот сервер за развој на Парцели и да ја рендерираме HTML-датотеката што ја создадовме откако ќе биде компајлирана во distдиректориумот.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
И конечно, можеме да започнеме Парцела. Од 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 за детали.
Увезете го JS на Bootstrap. Додајте го следново за 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.
И завршивте! 🎉 Со целосно вчитани Sass и JS изворот на Bootstrap, вашиот локален сервер за развој сега треба да изгледа вака.

Сега можете да започнете со додавање на сите компоненти на Bootstrap што сакате да ги користите. Задолжително проверете го целосниот проект за пример на Parcel за тоа како да вклучите дополнителен приспособен Sass и да ја оптимизирате вашата градба со увоз на само делови од CSS и JS на Bootstrap што ви се потребни.

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