Nubabla

Srɔ̃ alesi nàde Bootstrap wò dɔa me to Parcel zazã me.

Le axa sia dzi

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 peerDependenciesnunɔamesi la me dzi. Esia fia be ahiã be nàkpɔ egbɔ be yetsɔ wo ame evea siaa kpe ɖe wò package.jsonzazã 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.scssbe 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 devkple buildŋɔŋlɔdzesiwo le wò package.jsonfaɛ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