Ачаалагч ба илгээмж

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

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

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

Тохируулах

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

Төслийн хавтас үүсгээд npm-г тохируулна уу. Бид хавтас үүсгэж, бүх интерактив асуултуудыг асуухгүйн тулд аргументаар my-projectnpm-г эхлүүлнэ .-y
```
mkdir my-project && cd my-project
npm init -y
```
Илгээмжийг суулгах. Манай Webpack гарын авлагаас ялгаатай нь энд зөвхөн нэг бүтээх хэрэглүүрийн хамаарал бий. Илгээмж нь хэлний трансформаторуудыг (Sass гэх мэт) илрүүлснээр автоматаар суулгана. --save-devЭнэ хамаарал нь зөвхөн бүтээн байгуулалтад зориулагдсан болохоос үйлдвэрлэлд зориулагдаагүй гэдгийг бид дохио өгдөг.
```
npm i --save-dev parcel
```
Bootstrap суулгана уу. Одоо бид Bootstrap суулгаж болно. Бидний унадаг цэс, поповер, зөвлөмжүүд нь байршлаас нь хамаардаг тул бид бас Попперыг суулгах болно. Хэрэв та эдгээр бүрэлдэхүүн хэсгүүдийг ашиглахаар төлөвлөөгүй бол Попперыг энд орхиж болно.
```
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

Энэ үед бүх зүйл зөв газартаа байгаа боловч манай серверийг эхлүүлэхийн тулд Parcel-д HTML хуудас болон npm скрипт хэрэгтэй.

Илгээмжийг тохируулах

Хамааралуудыг суулгаж, төслийн хавтсаа кодлож эхлэхэд бэлэн болгосноор бид Parcel-ийг тохируулж, төслөө дотооддоо ажиллуулах боломжтой боллоо. Илгээмж нь дизайны хувьд ямар ч тохиргооны файл шаарддаггүй ч серверээ эхлүүлэхийн тулд бидэнд npm скрипт болон HTML файл хэрэгтэй.

src/index.htmlФайлыг бөглөнө үү . Илгээмжийг үзүүлэхийн тулд хуудас хэрэгтэй байгаа тул бид index.htmlCSS болон JavaScript файлууд зэрэг үндсэн HTML-г тохируулахын тулд хуудсыг ашигладаг.
```
<!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-ийн CSS-г Webpack-д ачаалах үед харахын тулд Bootstrap div class="container"- ийн загварчлалыг бага зэрэг оруулсан болно.<button>

Илгээмж нь биднийг Sass-г ашиглаж байгааг автоматаар илрүүлж, түүнийг дэмжихийн тулд Sass Parcel залгаасыг суулгана. Гэсэн хэдий ч хэрэв та хүсвэл гараар ажиллуулж npm i --save-dev @parcel/transformer-sassболно.
Parcel npm скриптүүдийг нэмнэ үү. Дараах скриптийг нээгээд объектод package.jsonнэмнэ үү. Бид энэ скриптийг ашиглан Илгээмжийн хөгжүүлэлтийн серверээ эхлүүлж, үүсгэсэн HTML файлыг лавлахад хөрвүүлсний дараа үзүүлэх болно.startscriptsdist
```
{
   // ...
   "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 импортлох

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

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

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