Bootstrap & Vite

Vite ашиглан төсөлдөө Bootstrap-ийн CSS болон JavaScript-г хэрхэн оруулах, багцлах албан ёсны гарын авлага.

Энэ хуудсан дээр

Та эцэс хүртэл алгасмаар байна уу? Энэ гарын авлагын эх код болон ажлын демо-г twbs/examples репозитороос татаж авна уу . Та мөн жишээг StackBlitz дээр нээж шууд засварлах боломжтой.

Тохируулах

Бид Bootstrap-тай Vite төслийг эхнээс нь барьж байгаа тул бид үнэхээр эхлэхээс өмнө зарим урьдчилсан нөхцөлүүд болон эхний алхамууд байна. Энэхүү гарын авлага нь танаас Node.js суулгасан байх ба терминалын талаар тодорхой мэдлэгтэй байхыг шаарддаг.

Төслийн хавтас үүсгээд npm-г тохируулна уу. Бид хавтас үүсгэж, бүх интерактив асуултуудыг асуухгүйн тулд аргументаар my-projectnpm-г эхлүүлнэ .-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-аас гадна бидэнд 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.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. Энэ бол CSS болон JS-г ашиглахын тулд Vite-ийн хөтөч дээр ачаалах HTML хуудас юм.

<!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-ийн CSS-г Vite ачаалах үед харахын тулд Bootstrap div class="container"- ийн загварчлалыг энд оруулав.<button>

Одоо бидэнд Vite-г ажиллуулахын тулд npm скрипт хэрэгтэй байна. Доор үзүүлсэн скриптийг нээгээд 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 импортлох

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-г импортлохын тулд дараахыг нэмнэ үү . 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';
```
Bootstrap-ийн залгаасуудыг хэрхэн ашиглах талаар дэлгэрэнгүй мэдээлэл авахыг хүсвэл манай JavaScript баримтуудыг уншина уу .
Тэгээд та дууслаа! 🎉 Bootstrap-ийн эх сурвалж Sass болон JS бүрэн ачаалагдсан үед таны локал хөгжүүлэлтийн сервер одоо иймэрхүү харагдах болно.

Одоо та ашиглахыг хүссэн Bootstrap бүрэлдэхүүн хэсгүүдээ нэмж эхлэх боломжтой. Өөрт хэрэгтэй Bootstrap-ийн CSS болон JS-ийн хэсгүүдийг импортлох замаар нэмэлт захиалгат Sass-ийг хэрхэн оруулах, бүтээцээ оновчтой болгохын тулд бүрэн хэмжээний Vite жишээ төслийг шалгаж үзэхээ мартуузай .

Энд ямар нэг буруу эсвэл хуучирсан зүйл харагдаж байна уу? GitHub дээр асуудал нээнэ үү . Асуудлыг олж засварлахад тусламж хэрэгтэй байна уу? GitHub дээр хайлт хийх эсвэл хэлэлцүүлэг эхлүүлэх .