Bootstrap & Vite

Vite ��рдәмендә Bootstrap'ның CSS һәм JavaScript'ны ничек кертү һәм бәйләү өчен рәсми кулланма.

Бу биттә

Ахырына атларга телисезме? Twbs / мисаллар репозиториясеннән чыганак коды һәм бу кулланма өчен эш демо йөкләү . Сез шулай ук турыдан- туры редакцияләү өчен StackBlitz мисалын ача аласыз.

Кору

Без Bootstrap белән Vite проектын төзибез, шуңа күрә кайбер шартлар һәм алгы адымнар бар. Бу кулланма сезгә Node.js урнаштыруны һәм терминал белән танышуны таләп итә.

Проект папкасын төзегез һәм npm урнаштырыгыз. Без папканы ясарбыз һәм барлык интерактив сораулар my-projectбирмәс өчен аргумент белән npm башлыйбыз .-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite урнаштырыгыз. Веб-пакет кулланмадан аермалы буларак, монда бер генә коралга бәйләнеш бар. Без --save-devбу бәйләнеш җитештерү өчен түгел, ә үсеш өчен кулланыла дип сигнал бирәбез.
```
npm i --save-dev vite
```
Bootstrap урнаштырыгыз. Хәзер без Bootstrap урнаштыра алабыз. Без шулай ук Попперны урнаштырачакбыз, чөнки безнең тамчылар, поповерлар, кораллар аларның урнашуы өчен аңа бәйле. Әгәр дә сез бу компонентларны кулланырга уйламасагыз, монда Попперны калдыра аласыз.
```
npm i --save bootstrap @popperjs/core
```
Өстәмә бәйләнеш урнаштырыгыз. Vite һәм Bootstrap'ка өстәп, Bootstrap'ның CSS-ны дөрес кертү һәм бәйләү өчен безгә тагын бер бәйләнеш (Sass) кирәк.
```
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>Bootstrap CSS Vite белән йөкләнгәнен күрербез.

Хәзер безгә Vite эшләтү өчен npm скрипты кирәк. Түбәндә күрсәтелгән сценарийны ачыгыз package.jsonһәм өстәгез start(сездә сынау скрипты булырга тиеш). Без бу скриптны җирле Vite dev серверын башлау өчен кулланачакбыз.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Finallyәм, ниһаять, без Vite башлый алабыз. Сезнең my-projectтерминалдагы папкадан яңа кушылган npm скриптын эшләгез:
```
npm start
```

Бу кулланманың киләсе һәм соңгы бүлегендә без Bootstrap'ның барлык CSS һәм JavaScript импортлаячакбыз.

Ботстрапны импортлау

Bootstrap's Sass импортын урнаштырыгыз 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
  }
}
```
Хәзер, Bootstrap CSS-ны импортлыйк. src/scss/styles.scssBootstrap чыганагы Sass-ны импортлау өчен түбәндәгеләрне өстәгез .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Сез теләсәгез, безнең стиль таблицаларын аерым кертә аласыз. Детальләр өчен безнең Sass импорт документларын укыгыз .
Алга таба без CSS-ны йөклибез һәм Bootstrap-ның JavaScript-ны импортлыйбыз. src/js/main.jsCSS-ны йөкләү һәм Bootstrap-ның барлык JS-ны импортлау өчен түбәндәгеләрне өстәгез . Поппер 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 документларыбызны укыгыз .
Син эшләдең! Bo Bootstrap чыганагы Sass һәм JS тулысынча йөкләнгән, сезнең җирле үсеш серверы хәзер шулай булырга тиеш.

Хәзер сез кулланырга теләгән Bootstrap компонентларын өсти башлый аласыз. Өстәмә махсус Sass кертү һәм Bootstrap'ның CSS һәм JS өлешләрен генә кертеп, сезнең оптимальләштерү өчен Vite мисал проектының тулы проектын карагыз .

Монда дөрес булмаган яки искергән нәрсәне карагыз? Зинһар , GitHub'та проблема ачыгыз . Проблемаларны чишүдә ярдәм кирәкме? GitHub'та эзләү яки дискуссия башлау .