Parcel

Aprende cómo incluir Bootstrap en tu proyecto usando Parcel.

On this page

Instalar Parcel

Instalar Bootstrap

Instala bootstrap como un módulo de Node.js usando npm.

Bootstrap depende de Popper, que se especifica en la propiedad peerDependencies. Esto significa que tendrás que asegurarte de añadir ambos a tu package.json usando npm install @popperjs/core.

Cuando todo esté completado, tu proyecto estará estructurado así:

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

Importar JavaScript

Importa el JavaScript de Bootstrap en el punto de entrada de tu app (normalmente src/index.js). Puedes importar todos nuestros plugins en un archivo o por separado si solo necesitas un subconjunto de ellos.

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

Importar CSS

Para aprovechar todo el potencial de Bootstrap y personalizarlo a tus necesidades, usa los archivos fuente como parte del proceso de bundling de tu proyecto.

Crea tu propio scss/custom.scss para importar los archivos Sass de Bootstrap y luego sobrescribir las variables personalizadas integradas.

Construir la app

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

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

Editar `package.json`

Añade los scripts dev y build en tu archivo package.json.

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

Ejecutar script dev

Tu app será accesible en http://127.0.0.1:1234.

npm run dev

Construir archivos de la app

Los archivos construidos están en la carpeta build/.

npm run build