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
```
Парселро насб кунед. Баръакси дастури Webpack мо, дар ин ҷо танҳо як вобастагии асбоби сохтмон вуҷуд дорад. Парсел ба таври худкор трансформаторҳои забонро (ба монанди 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 аз рӯи тарҳ ягон файли конфигуратсияро талаб намекунад, аммо барои оғоз кардани сервери мо ба мо скрипти 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зеринро ба объект илова кунед. Мо ин скриптро барои оғоз кардани сервери таҳияи Parcel-и худ истифода мебарем ва файли HTML-ро, ки мо пас аз тартиб додани он ба директория сохтаем, пешкаш мекунем.startscriptsdist
```
{
   // ...
   "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 ду воридотро талаб мекунад, яке ба мо styles.scssва дигаре ба 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, зеринро илова кунед. Поппер ба таври худкор тавассути 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-и моро хонед .
Ва шумо тамом шудед! 🎉 Бо манбаи Sass Bootstrap ва JS пурра бор карда шудааст, сервери рушди маҳаллии шумо акнун бояд чунин бошад.

Акнун шумо метавонед ба илова кардани ҳама ҷузъҳои Bootstrap, ки мехоҳед истифода баред, оғоз кунед. Боварӣ ҳосил кунед, ки лоиҳаи пурраи намунаи Parcel-ро барои дохил кардани Sass-и фармоишии иловагӣ ва оптимизатсияи сохтани худ тавассути ворид кардани танҳо қисмҳои CSS ва JS Bootstrap, ки ба шумо лозим аст, тафтиш кунед.

Дар ин ҷо ягон чизи нодуруст ё кӯҳнаро мебинед? Лутфан як масъаларо дар GitHub кушоед . Барои бартараф кардани мушкилот кӯмак лозим аст? Дар GitHub ҷустуҷӯ ё муҳокима оғоз кунед .