Pasèl

Aprann kijan pou mete Bootstrap nan pwojè ou lè l sèvi avèk Parcel.

Nan paj sa a

Enstale pasèl

Enstale Bootstrap

Enstale bootstrap kòm yon modil Node.js lè l sèvi avèk npm.

Bootstrap depann de Popper , ki espesifye nan peerDependenciespwopriyete a. Sa vle di ke w ap gen pou asire w ke ou ajoute tou de nan w ap package.jsonitilize 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.scsspou enpòte dosye Sass Bootstrap yo epi answit pase sou varyab koutim entegre yo .

Bati app

Mete src/index.jsanvan </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>

Edit`package.json`

Ajoute devak buildscripts nan package.jsondosye 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