Колет

Научете как да включите Bootstrap във вашия проект с помощта на Parcel.

На тази страница

Инсталирайте Parcel

Инсталирайте Parcel Bundler .

Инсталирайте Bootstrap

Инсталирайте bootstrap като модул Node.js с помощта на npm.

Bootstrap зависи от Popper , който е посочен в 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

Импортирайте JavaScript на Bootstrap във входната точка на вашето приложение (обикновено 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 и да го персонализирате според вашите нужди, използвайте изходните файлове като част от процеса на групиране на вашия проект.

Създайте свой собствен scss/custom.scss, за да импортирате Sass файловете на Bootstrap и след това заменете вградените персонализирани променливи .

Създайте приложение

Включете 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и buildскриптове във вашия package.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