Bootstrap & Parcel

Афіцыйнае кіраўніцтва аб тым, як уключыць і аб'яднаць CSS і JavaScript Bootstrap у ваш праект з дапамогай Parcel.

На гэтай старонцы

Хочаце прапусціць да канца? Спампуйце зыходны код і рабочую дэманстрацыю гэтага кіраўніцтва з рэпазітара twbs/examples . Вы таксама можаце адкрыць прыклад у StackBlitz, але не запускаць яго, таму што Parcel там зараз не падтрымліваецца.

Усталяваць

Мы ствараем праект 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 і запусціць наш праект лакальна. Сама пасылка не патрабуе файла канфігурацыі па задуме, але нам патрэбны скрыпт 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каб імпартаваць увесь зыходны код Bootstrap Sass.
```
// 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.
І гатова! 🎉 Калі зыходныя коды Bootstrap Sass і JS цалкам загружаны, ваш лакальны сервер распрацоўкі цяпер павінен выглядаць так.

Цяпер вы можаце пачаць дадаваць любыя кампаненты Bootstrap, якія хочаце выкарыстоўваць. Абавязкова азнаёмцеся з поўным прыкладам праекта Parcel , каб даведацца , як уключыць дадатковы карыстальніцкі Sass і аптымізаваць зборку, імпартуючы толькі тыя часткі CSS і JS Bootstrap, якія вам патрэбныя.

Бачыце тут штосьці не так ці састарэлае? Адкрыйце пытанне на GitHub . Патрэбна дапамога па ліквідацыі непаладак? Шукайце або пачынайце абмеркаванне на GitHub.