Илгээмж

Parcel ашиглан Bootstrap-ийг төсөлдөө хэрхэн оруулах талаар мэдэж аваарай.

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

Илгээмжийг суулгах

Parcel Bundler суулгана уу .

Bootstrap суулгана уу

Bootstrap -ийг npm ашиглан Node.js модуль болгон суулгаарай.

Bootstrap нь шинж чанарт заасан Поппероос хамаардаг peerDependencies. Энэ нь та аль алиныг нь package.jsonашиглахдаа нэмж оруулах хэрэгтэй болно гэсэн үг юм npm install @popperjs/core.

Бүх зүйл дуусмагц таны төсөл дараах бүтэцтэй болно:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript импортлож байна

Bootstrap-ийн JavaScript -г өөрийн програмын нэвтрэх цэгт импортлох (ихэвчлэн src/index.js). Та манай бүх залгаасуудыг нэг файлд эсвэл тусад нь импортлох боломжтой.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS импортлож байна

Bootstrap-ийн бүрэн боломжийг ашиглах, өөрийн хэрэгцээнд нийцүүлэн тохируулахын тулд эх файлуудыг төслийн багцлах үйл явцын нэг хэсэг болгон ашиглаарай.

Bootstrap-ийн Sass файлуудыг импортлохынscss/custom.scss тулд өөрөө үүсгэж , дараа нь суулгасан өөрчлөн хувьсагчдыг хүчингүй болго .

Програм бүтээх

src/index.jsХаалтын шошгын өмнө оруулна уу </body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

Засварлах`package.json`

Файлдаа скриптүүдийг нэмж devоруулаарай .buildpackage.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Хөгжүүлэгчийн скриптийг ажиллуул

Таны апп-д хандах боломжтой http://127.0.0.1:1234.

npm run dev

Апп файл үүсгэх

Баригдсан файлууд нь build/хавтсанд байна.

npm run build