Pasèl
Aprann kijan pou mete Bootstrap nan pwojè ou lè l sèvi avèk Parcel.
Enstale pasèl
Enstale Parcel Bundler .
Enstale Bootstrap
Enstale bootstrap kòm yon modil Node.js lè l sèvi avèk npm.
Bootstrap depann de Popper , ki espesifye nan peerDependencies
pwopriyete a. Sa vle di ke w ap gen pou asire w ke ou ajoute tou de nan w ap package.json
itilize yo npm install @popperjs/core
.
Lè tout pral fini, pwojè ou a pral estriktire tankou sa a:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
Enpòte JavaScript
Enpòte JavaScript Bootstrap nan pwen antre aplikasyon w lan (anjeneral src/index.js
). Ou ka enpòte tout grefon nou yo nan yon sèl fichye oswa separeman si ou bezwen sèlman yon ti gwoup nan yo.
// 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';
Enpòte CSS
Pou itilize tout potansyèl Bootstrap la epi personnaliser li selon bezwen ou yo, sèvi ak dosye sous yo kòm yon pati nan pwosesis gwoupman pwojè ou a.
Kreye pwòp ou a scss/custom.scss
pou enpòte dosye Sass Bootstrap yo epi answit pase sou varyab koutim entegre yo .
Bati app
Mete src/index.js
anvan </body>
tag la fèmen.
<!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>
Editpackage.json
Ajoute dev
ak build
scripts nan package.json
dosye ou.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
Kouri dev script
Aplikasyon ou a ap aksesib nan http://127.0.0.1:1234
.
npm run dev
Konstwi fichye aplikasyon yo
Fichye bati yo nan build/
katab la.
npm run build