Ծանրոց
Իմացեք, թե ինչպես ներառել Bootstrap-ը ձեր նախագծում՝ օգտագործելով 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-ի ներմուծում
Ներմուծեք 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-ի ողջ ներուժն օգտագործելու և այն ձեր կարիքներին հարմարեցնելու համար օգտագործեք սկզբնաղբյուր ֆայլերը որպես ձեր նախագծի փաթեթավորման գործընթացի մաս:
Ստեղծեք ձերը scss/custom.scss
՝ Bootstrap-ի Sass ֆայլերը ներմուծելու համար , այնուհետև շրջեք ներկառուցված հատուկ փոփոխականները :
Կառուցեք հավելված
Ներառեք 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