Nubabla
Srɔ̃ alesi nàde Bootstrap wò dɔa me to Parcel zazã me.
De Parcel la ɖe wò kɔmpiuta dzi
De Parcel Bundler la ɖe wò kɔmpiuta dzi .
De Bootstrap la ɖe wò kɔmpiuta dzi
De bootstrap abe Node.js module ene to npm zazã me.
Bootstrap nɔ te ɖe Popper , si wogblɔ le peerDependencies
nunɔamesi la me dzi. Esia fia be ahiã be nàkpɔ egbɔ be yetsɔ wo ame evea siaa kpe ɖe wò package.json
zazã npm install @popperjs/core
ŋu .
Ne wowu wo katã nu la, woawɔ ɖoɖo ɖe wò dɔa ŋu ale:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
JavaScript ƒe tsɔtsɔ va dukɔa me
De Bootstrap ƒe JavaScript ɖe wò dɔwɔnua ƒe gegeɖeƒe (zi geɖe la src/index.js
). Àte ŋu atsɔ míaƒe kpeɖeŋutɔawo katã ade faɛl ɖeka me alo ɖe vovo nenye be wo dometɔ sue aɖe koe nèhiã.
// 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 ƒe tsɔtsɔ va dukɔa me
Be nàwɔ Bootstrap ƒe ŋutete bliboa ŋudɔ eye nàtrɔ asi le eŋu wòasɔ ɖe wò hiahiãwo nu la, zã dzɔtsoƒe faɛlwo abe wò dɔa ƒe ƒuƒoƒo ƒe ɖoɖoa ƒe akpa aɖe ene.
Wɔ tɔwò scss/custom.scss
be nàxɔ Bootstrap ƒe Sass faɛlwo eye emegbe nàɖe asi le tɔtrɔ tɔxɛ siwo wotu ɖe eme la ŋu .
Tu dɔwɔnua ɖo
Tsɔe kpe src/index.js
ɖe eŋu hafi nàŋlɔ nutrenu </body>
ƒe dzesidea.
<!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>
Wɔ tɔtrɔpackage.json
Tsɔe kpe ɖe eŋu dev
kple build
ŋɔŋlɔdzesiwo le wò package.json
faɛl la me.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
Ƒu du dev ŋɔŋlɔdzesiwo
Woate ŋu akpɔ wò dɔwɔnua le http://127.0.0.1:1234
.
npm run dev
Tu app ƒe faɛlwo
Fail siwo wotu la le build/
agbalẽdzraɖoƒea.
npm run build