Bootstrap & Vite

ოფიციალური გზამკვლევი, თუ როგორ უნდა ჩართოთ და დააკავშიროთ Bootstrap-ის CSS და JavaScript თქვენს პროექტში Vite-ის გამოყენებით.

ამ გვერდზე

გსურთ ბოლომდე გამოტოვოთ? ჩამოტვირთეთ ამ სახელმძღვანელოს საწყისი კოდი და სამუშაო დემო ვერსია twbs/მაგალითების საცავიდან . თქვენ ასევე შეგიძლიათ გახსნათ მაგალითი StackBlitz- ში პირდაპირი რედაქტირებისთვის.

Აწყობა

ჩვენ ვქმნით Vite პროექტს Bootstrap-ით ნულიდან, ასე რომ, არსებობს გარკვეული წინაპირობები და წინა ნაბიჯები, სანამ ნამდვილად დავიწყებთ. ეს გზამკვლევი მოითხოვს, რომ გქონდეთ Node.js დაინსტალირებული და გარკვეული ცოდნა ტერმინალთან.

შექმენით პროექტის საქაღალდე და დააყენეთ npm. ჩვენ შევქმნით my-projectსაქაღალდეს და მოვაწყობთ npm-ს -yარგუმენტით, რათა თავიდან ავიცილოთ ყველა ინტერაქტიული შეკითხვის დასმა.
```
mkdir my-project && cd my-project
npm init -y
```
დააინსტალირეთ Vite. ჩვენი Webpack სახელმძღვანელოსგან განსხვავებით, აქ არის მხოლოდ ერთი build ინსტრუმენტის დამოკიდებულება. ჩვენ ვიყენებთ --save-devიმის სიგნალს, რომ ეს დამოკიდებულება მხოლოდ განვითარებისთვისაა და არა წარმოებისთვის.
```
npm i --save-dev vite
```
დააინსტალირეთ Bootstrap. ახლა ჩვენ შეგვიძლია დავაყენოთ Bootstrap. ჩვენ ასევე დავაინსტალირებთ Popper-ს, რადგან ჩვენი ჩამოსაშლელი ფაილები, პოპოვერები და ინსტრუმენტების რჩევები მასზეა დამოკიდებული მათი პოზიციონირებისთვის. თუ არ გეგმავთ ამ კომპონენტების გამოყენებას, შეგიძლიათ გამოტოვოთ პოპერი აქ.
```
npm i --save bootstrap @popperjs/core
```
დააინსტალირეთ დამატებითი დამოკიდებულება. Vite-ისა და Bootstrap-ის გარდა, ჩვენ გვჭირდება კიდევ ერთი დამოკიდებულება (Sass) Bootstrap-ის CSS-ის სწორად იმპორტირებისთვის და შეკვრისთვის.
```
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-ის მიერ.
ახლა ჩვენ გვჭირდება npm სკრიპტი Vite-ის გასაშვებად. გახსენით package.jsonდა დაამატეთ startქვემოთ ნაჩვენები სკრიპტი (თქვენ უკვე უნდა გქონდეთ ტესტის სკრიპტი). ჩვენ გამოვიყენებთ ამ სკრიპტს ჩვენი ადგილობრივი Vite dev სერვერის დასაწყებად.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
და ბოლოს, ჩვენ შეგვიძლია დავიწყოთ Vite. თქვენი ტერმინალის my-projectსაქაღალდედან გაუშვით ახლად დამატებული npm სკრიპტი:
```
npm start
```

ამ სახელმძღვანელოს მომდევნო და ბოლო განყოფილებაში ჩვენ შემოვიტანთ Bootstrap-ის ყველა CSS-ს და JavaScript-ს.

ჩატვირთვის იმპორტი

დააყენეთ Bootstrap-ის 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';
```
წაიკითხეთ ჩვენი JavaScript დოკუმენტები დამატებითი ინფორმაციისთვის, თუ როგორ გამოიყენოთ Bootstrap-ის დანამატები.
და თქვენ დაასრულეთ! 🎉 Bootstrap-ის წყარო Sass და JS სრულად დატვირთული, თქვენი ლოკალური განვითარების სერვერი ახლა ასე უნდა გამოიყურებოდეს.

ახლა თქვენ შეგიძლიათ დაიწყოთ ნებისმიერი Bootstrap კომპონენტის დამატება, რომლის გამოყენებაც გსურთ. დარწმუნდით, რომ შეამოწმეთ Vite-ის სრული მაგალითის პროექტი , თუ როგორ უნდა შეიტანოთ დამატებითი საბაჟო Sass და ოპტიმიზაცია გაუწიოთ თქვენს კონსტრუქციას Bootstrap-ის CSS-ისა და JS-ის მხოლოდ იმ ნაწილების იმპორტით, რომელიც გჭირდებათ.

ხედავთ რაიმე არასწორი ან მოძველებულია აქ? გთხოვთ გახსენით პრობლემა GitHub-ზე . გჭირდებათ დახმარება პრობლემების აღმოფხვრაში? მოძებნეთ ან დაიწყეთ დისკუსია GitHub-ზე.