Parcela

Yachay imayna Bootstrap ruwayta proyectoykipi Parcel kaqwan.

Kay p'anqapi

Instalar Paquete

Bootstrap nisqa churay

Bootstrap huk Node.js módulo hina churay npm kaqwan.

Bootstrap Popper kaqmanta hapirin , mayqinchus peerDependenciespropiedadpi nisqa kachkan. package.jsonKayqa niyta munan iskayninta llamk'achisqaykiman yapanayki tiyan npm install @popperjs/core.

Tukuy tukusqa kaptin, proyectoyki kayhina estructurasqa kanqa:

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

JavaScript nisqa hawamanta apamuy

Bootstrap kaqpa JavaScript kaqninta ruwanaykipa yaykuyninpi apamuy (aswanta src/index.js). Llapa pluginsniyku huk willañiqipi utaq sapaqmanta apamuyta atikunki sichus huk huch'uy huñullata munanki.

// 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 nisqa hawamanta apamuspa

Bootstrap kaqpa hunt'asqa atiyninta llamk'achinapaq chaymanta necesidadniykimanhina ruwanapaq, pukyuta willañiqikunata llamk'achiy huk proyectoykipa paquete ruwayninpa huknin kaqnin hina.

Kikinpa ruway scss/custom.scssBootstrap kaqpa Sass willañiqikunata yaykuchinaykipaq chaymanta chaymanta ruwasqa sapanchasqa tikraqkunata llalliy .

Construir app

Incluye src/index.jsantes de la </body>etiqueta de cierre.

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

Ruwapay`package.json`

Yanapakuy devhinaspa buildscriptkuna package.jsonarchivoykipi.

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

Dev qillqa mayt'uta purichiy

Appniykiqa kaypi yaykuyta atikunqa http://127.0.0.1:1234.

npm run dev

App archivokunata ruway

Rurasqa willañiqikunaqa build/qillqana mayt'upim kachkan.

npm run build