Parcel

Kawm paub yuav ua li cas suav nrog Bootstrap hauv koj qhov project siv Parcel.

Ntawm nplooj ntawv no

Nruab Parcel

Nruab Bootstrap

Nruab bootstrap raws li Node.js module siv npm.

Bootstrap nyob ntawm Popper , uas tau teev tseg hauv cov peerDependenciescuab yeej. Qhov no txhais tau tias koj yuav tau ua kom paub tseeb tias ntxiv ob qho tib si rau koj package.jsonsiv npm install @popperjs/core.

Thaum txhua yam yuav ua tiav, koj qhov project yuav raug teeb tsa zoo li no:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

Importing JavaScript

Ntshuam Bootstrap's JavaScript hauv koj lub app nkag nkag (feem ntau src/index.js). Koj tuaj yeem import tag nrho peb cov plugins hauv ib cov ntaub ntawv lossis cais yog tias koj xav tau tsuas yog ib pawg ntawm lawv.

// 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';

Importing CSS

Txhawm rau siv tag nrho cov peev txheej ntawm Bootstrap thiab kho nws rau koj cov kev xav tau, siv cov ntaub ntawv los ua ib feem ntawm koj qhov project txoj kev bundling.

Tsim koj tus kheej scss/custom.scsslos import Bootstrap's Sass cov ntaub ntawv thiab tom qab ntawd hla cov kev cai sib txawv ua ke .

Tsim app

suav nrog src/index.jsua ntej kaw </body>tag.

<!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>

Kho kom raug`package.json`

Ntxiv devthiab buildsau ntawv hauv koj package.jsoncov ntaub ntawv.

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

Khiav dev script

Koj lub app yuav siv tau ntawm http://127.0.0.1:1234.

npm run dev

Tsim cov ntaub ntawv app

Cov ntaub ntawv tsim muaj nyob hauv cov build/ntawv tais ceev tseg.

npm run build