Bootstrap & Parcel

Официалното ръководство за това как да включите и групирате CSS и JavaScript на Bootstrap във вашия проект с помощта на Parcel.

На тази страница

Искате ли да прескочите до края? Изтеглете изходния код и работната демонстрация за това ръководство от хранилището twbs/examples . Можете също да отворите примера в StackBlitz, но не и да го стартирате, защото 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-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 не изисква конфигурационен файл по дизайн, но имаме нужда от 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 изисква две импортирания, едно в our styles.scssи едно в our 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.