Bootstrap & Parcel

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

ამ გვერდზე

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

Აწყობა

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

შექმენით პროექტის საქაღალდე და დააყენეთ npm. ჩვენ შევქმნით my-projectსაქაღალდეს და მოვაწყობთ npm-ს -yარგუმენტით, რათა თავიდან ავიცილოთ ყველა ინტერაქტიული შეკითხვის დასმა.
```
mkdir my-project && cd my-project
npm init -y
```
დააინსტალირეთ ამანათი. ჩვენი Webpack სახელმძღვანელოსგან განსხვავებით, აქ არის მხოლოდ ერთი build ინსტრუმენტის დამოკიდებულება. ამანათი ავტომატურად დააინსტალირებს ენის ტრანსფორმატორებს (როგორც Sass), როგორც კი აღმოაჩენს მათ. ჩვენ ვიყენებთ --save-devიმის სიგნალს, რომ ეს დამოკიდებულება მხოლოდ განვითარებისთვისაა და არა წარმოებისთვის.
```
npm i --save-dev parcel
```
დააინსტალირეთ Bootstrap. ახლა ჩვენ შეგვიძლია დავაყენოთ Bootstrap. ჩვენ ასევე დავაინსტალირებთ 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

ამ ეტაპზე, ყველაფერი სწორ ადგილზეა, მაგრამ ამანათს სჭირდება HTML გვერდი და npm სკრიპტი ჩვენი სერვერის დასაწყებად.

ამანათის კონფიგურაცია

დამოკიდებულებებით დაინსტალირებული და ჩვენი პროექტის საქაღალდე მზად არის კოდირების დასაწყებად, ახლა შეგვიძლია დავაკონფიგურიროთ ამანათი და გავატაროთ ჩვენი პროექტი ადგილობრივად. თავად ამანათი არ საჭიროებს კონფიგურაციის ფაილს დიზაინის მიხედვით, მაგრამ ჩვენ გვჭირდება npm სკრიპტი და HTML ფაილი ჩვენი სერვერის დასაწყებად.

შეავსეთ src/index.htmlფაილი. ამანათს სჭირდება გვერდი რენდერისთვის, ამიტომ ჩვენ ვიყენებთ ჩვენს 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>ისე, რომ დავინახოთ, როდის ჩაიტვირთება Bootstrap-ის CSS Webpack-ის მიერ.

ამანათი ავტომატურად აღმოაჩენს, რომ ჩვენ ვიყენებთ 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"
   },
   // ...
}
```
და ბოლოს, ჩვენ შეგვიძლია დავიწყოთ ამანათი. თქვენი ტერმინალის my-projectსაქაღალდედან გაუშვით ახლად დამატებული npm სკრიპტი:
```
npm start
```

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

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

Bootstrap-ის ამანათში იმპორტისთვის საჭიროა ორი იმპორტი, ერთი ჩვენს styles.scssდა ერთი ჩვენს main.js.

Bootstrap-ის CSS-ის იმპორტი. დაამატეთ შემდეგი src/scss/styles.scssBootstrap-ის Sass-ის ყველა წყაროს იმპორტისთვის.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
თქვენ ასევე შეგიძლიათ ჩვენი სტილის ფურცლების ინდივიდუალურად იმპორტი თუ გსურთ. წაიკითხეთ ჩვენი Sass იმპორტის დოკუმენტები დეტალებისთვის.
Bootstrap-ის JS-ის იმპორტი. დაამატეთ შემდეგი src/js/main.jsBootstrap-ის ყველა JS-ის იმპორტისთვის. პოპერის იმპორტი ავტომატურად მოხდება 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 და გააუმჯობესოთ თქვენი კონსტრუქცია Bootstrap-ის CSS-ისა და JS-ის მხოლოდ იმ ნაწილების იმპორტით, რომელიც გჭირდებათ.

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