Bootstrap & Vite

Дастури расмӣ дар бораи чӣ гуна дохил кардан ва бастани CSS ва JavaScript-и Bootstrap дар лоиҳаи худ бо истифода аз Vite.

Дар ин саҳифа

Мехоҳед то ба охир гузаред? Рамзи манбаъ ва намоиши кории ин дастурро аз анбори twbs/examples зеркашӣ кунед . Шумо инчунин метавонед мисолро дар StackBlitz барои таҳрири зинда кушоед.

Ташкил кардан

Мо лоиҳаи Vite-ро бо Bootstrap аз сифр бунёд карда истодаем, бинобар ин пеш аз он ки мо воқеан оғоз кунем, баъзе шартҳо ва қадамҳои пешакӣ мавҷуданд. Ин дастур аз шумо талаб мекунад, ки Node.js насб карда бошед ва каме шиносоӣ бо терминал дошта бошед.

Папкаи лоиҳа эҷод кунед ва npm-ро насб кунед. Мо my-projectпапкаро эҷод мекунем ва npm-ро бо -yаргумент оғоз мекунем, то он ба мо ҳама саволҳои интерактивиро надиҳад.
```
mkdir my-project && cd my-project
npm init -y
```
Vite насб кунед. Баръакси дастури Webpack мо, дар ин ҷо танҳо як вобастагии асбоби сохтмон вуҷуд дорад. Мо ишора мекунем --save-dev, ки ин вобастагӣ танҳо барои истифодаи рушд аст, на барои истеҳсолот.
```
npm i --save-dev vite
```
Bootstrap-ро насб кунед. Акнун мо метавонем Bootstrap-ро насб кунем. Мо инчунин Попперро насб мекунем, зеро афтандаҳо, поповерҳо ва маслиҳатҳои асбобҳои мо барои ҷойгиркунии онҳо аз он вобастаанд. Агар шумо нақшаи истифодаи ин ҷузъҳоро надошта бошед, шумо метавонед Попперро дар ин ҷо гузоред.
```
npm i --save bootstrap @popperjs/core
```
Вобастагии иловагӣ насб кунед. Илова ба Vite ва Bootstrap, ба мо вобастагии дигар (Sass) лозим аст, то дуруст воридот ва бастабандии CSS-и Bootstrap.
```
npm i --save-dev sass
```

Акнун, ки мо ҳама вобастагии заруриро насб ва танзим кардаем, мо метавонем ба кор дар сохтани файлҳои лоиҳа ва воридоти 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 vite.config.js

Вақте ки шумо анҷом медиҳед, лоиҳаи пурраи шумо бояд чунин бошад:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

Дар ин лаҳза, ҳама чиз дар ҷои дуруст аст, аммо Vite кор намекунад, зеро мо ҳанӯз пур vite.config.jsнакардаем.

Vite-ро танзим кунед

Бо вобастагӣ насбшуда ва папкаи лоиҳаи мо барои оғоз кардани рамзгузорӣ омода аст, мо ҳоло метавонем Vite-ро танзим кунем ва лоиҳаи худро ба таври маҳаллӣ иҷро кунем.

vite.config.jsДар муҳаррири худ кушоед . Азбаски он холӣ аст, мо бояд ба он баъзе конфигуратсияи дегхонаиро илова кунем, то мо сервери худро оғоз кунем. Ин қисми конфигуратсия ба Vite мегӯяд, ки бояд JavaScript-и лоиҳаи моро ҷустуҷӯ кунад ва сервери таҳия чӣ гуна рафтор кунад (аз srcҷузвдон бо боркунии гарм кашида шавад).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
Минбаъд мо пур мекунем src/index.html. Ин саҳифаи HTML аст, ки Vite дар браузер барои истифодаи CSS ва JS-и маҷмӯӣ бор мекунад, ки мо дар қадамҳои баъдӣ ба он илова хоҳем кард.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
Мо каме услуби Bootstrap-ро дар ин ҷо бо он дохил мекунем div class="container"ва <button>то бубинем, ки вақте CSS-и Bootstrap аз ҷониби Vite бор карда мешавад.
Ҳоло ба мо скрипти npm лозим аст, то Vite-ро иҷро кунем. Скрипти дар зер нишон додашударо кушоед package.jsonва илова startкунед (шумо бояд аллакай скрипти санҷиширо дошта бошед). Мо ин скриптро барои оғоз кардани сервери маҳаллии худ Vite истифода мебарем.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ва ниҳоят, мо метавонем Vite-ро оғоз кунем. Аз my-projectҷузвдони терминали худ он скрипти нав иловашудаи npm -ро иҷро кунед:
```
npm start
```

Дар бахши навбатӣ ва ниҳоии ин дастур, мо ҳамаи CSS ва JavaScript-и Bootstrap-ро ворид мекунем.

Воридоти Bootstrap

Воридоти Sass Bootstrap-ро дар vite.config.js. Файли конфигуратсияи шумо ҳоло пурра аст ва бояд ба порчаи зер мувофиқат кунад. Ягона қисми нав дар ин ҷо ин resolveбахш аст - мо онро барои илова кардани тахаллус ба файлҳои ибтидоии худ истифода мебарем, node_modulesто воридот то ҳадди имкон содда нигоҳ дошта шавад.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Акнун биёед CSS-и Bootstrap-ро ворид кунем. Барои src/scss/styles.scssворид кардани тамоми манбаи Bootstrap Sass, зеринро илова кунед.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Агар хоҳед, шумо инчунин метавонед ҷадвалҳои услубҳои моро ба таври инфиродӣ ворид кунед. Барои тафсилот ҳуҷҷатҳои воридотии Sass-и моро хонед .
Баъдан мо CSS-ро бор мекунем ва JavaScript-и Bootstrap-ро ворид мекунем. Барои src/js/main.jsбор кардани CSS ва ворид кардани тамоми JS Bootstrap, зеринро илова кунед. Поппер ба таври худкор тавассути Bootstrap ворид карда мешавад.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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, ки мехоҳед истифода баред, оғоз кунед. Боварӣ ҳосил кунед, ки лоиҳаи пурраи намунаи Vite-ро барои дохил кардани Sass-и фармоишии иловагӣ ва оптимизатсияи сохтани худ тавассути ворид кардани танҳо қисмҳои CSS ва JS Bootstrap, ки ба шумо лозим аст, тафтиш кунед.

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