Парцела
Научете како да го вклучите Bootstrap во вашиот проект користејќи Parcel.
Инсталирајте парцела
Инсталирајте го пакетот пакети .
Инсталирајте 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