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 ուղեցույցի, այստեղ կա միայն մեկ կառուցման գործիքի կախվածություն: Մենք օգտագործում --save-devենք ազդանշան տալու, որ այս կախվածությունը միայն զարգացման համար է, այլ ոչ արտադրության համար:
```
npm i --save-dev vite
```
Տեղադրեք Bootstrap-ը: Այժմ մենք կարող ենք տեղադրել Bootstrap: Մենք նաև կտեղադրենք Popper-ը, քանի որ մեր բացվող էջերը, popover-ները և գործիքների հուշումները կախված են դրանցից իրենց դիրքավորման համար: Եթե դուք չեք պլանավորում օգտագործել այդ բաղադրիչները, կարող եք այստեղ բաց թողնել 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 script Vite-ն գործարկելու համար: Բացեք package.jsonև ավելացրեք startստորև ներկայացված սցենարը (դուք արդեն պետք է ունենաք թեստային սցենարը): Մենք կօգտագործենք այս սցենարը մեր տեղական Vite մշակող սերվերը գործարկելու համար:
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Եվ վերջապես, մենք կարող ենք սկսել Vite-ը: Ձեր տերմինալի my-projectթղթապանակից գործարկեք նոր ավելացված npm սցենարը.
```
npm start
```

Այս ուղեցույցի հաջորդ և վերջին բաժնում մենք կներմուծենք Bootstrap-ի CSS-ն ու JavaScript-ը:

Ներմուծեք Bootstrap

Կարգավորեք 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.scss՝ Bootstrap-ի Sass-ի բոլոր աղբյուրները ներմուծելու համար:
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Եթե ցանկանում եք, կարող եք նաև անհատապես ներմուծել մեր ոճաթերթերը: Մանրամասների համար կարդացեք մեր Sass ներմուծման փաստաթղթերը :
Հաջորդը մենք բեռնում ենք CSS-ը և ներմուծում Bootstrap-ի JavaScript-ը: Ավելացրեք հետևյալը src/js/main.js՝ CSS-ը բեռնելու և Bootstrap-ի բոլոր JS-ները ներմուծելու համար: Popper-ը ավտոմատ կերպով կներմուծվի 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-ում: