Parcel

Pagkat-on unsaon paglakip ang Bootstrap sa imong proyekto gamit ang Parcel.

Niini nga panid

I-install ang Parcel

I-install ang Bootstrap

I- install ang bootstrap isip usa ka module sa Node.js gamit ang npm.

Ang Bootstrap nagdepende sa Popper , nga gipiho sa peerDependencieskabtangan. Nagpasabot kini nga kinahanglan nimong sigurohon nga idugang ang duha sa imong package.jsonpaggamit npm install @popperjs/core.

Kung mahuman na ang tanan, ang imong proyekto ma-istruktura sama niini:

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

Pag-import sa JavaScript

I- import ang JavaScript sa Bootstrap sa entry point sa imong app (kasagaran src/index.js). Mahimo nimong i-import ang tanan namon nga mga plugin sa usa ka file o gilain kung kinahanglan nimo ang usa ka subset niini.

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

Pag-import sa CSS

Aron magamit ang tibuuk nga potensyal sa Bootstrap ug ipasibo kini sa imong mga panginahanglan, gamita ang gigikanan nga mga file ingon usa ka bahin sa proseso sa pagbugkos sa imong proyekto.

Paghimo og imong kaugalingon scss/custom.scssaron ma- import ang mga file sa Sass sa Bootstrap ug dayon i-override ang mga built-in nga custom variables .

Paghimo app

Ilakip src/index.jssa dili pa ang panapos nga </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>

Edit`package.json`

Idugang devug buildmga script sa imong package.jsonfile.

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

Pagdalag dev script

Ang imong app mahimong ma-access sa http://127.0.0.1:1234.

npm run dev

Paghimo mga file sa app

Ang gitukod nga mga file anaa sa build/folder.

npm run build