Колет
Научете как да включите 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