Instalación de Parcel
Instala Parcel Bundler.
Instalación de Bootstrap
Instala bootstrap como un módulo Node.js usando npm.
Bootstrap depende de Popper, que se especifica en la propiedad peerDependencies
.
Esto significa que deberás asegurarte de agregarlo a tu package.json
usando npm install @popperjs/core
.
Cuando todo esté completo, tu proyecto se estructurará de la siguiente manera:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
Tal vez te interese
Importación de JavaScript
Importa el JavaScript de Bootstrap en el punto de entrada de su aplicación (generalmente src/index.js
). Puedes importar todos nuestros plugins en un archivo o por separado si necesitas solo un subconjunto de ellos.
// Importar todos los plugins
import * as bootstrap from 'bootstrap';
// O importar solo los plugins necesarios
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
// O importar solo uno
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
Importación de CSS
Para utilizar todo el potencial de Bootstrap y personalizarlo según tus necesidades, utiliza los archivos fuente como parte del proceso bundling (agrupación de todos los archivos) de tu proyecto.
Crea tu propio scss/custom.scss
para importar archivos Sass de Bootstrap y luego sobrescribe las variables personalizadas integradas.
Crear la aplicación
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>
Edita package.json
Agrega 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"
}
Ejecuta el script dev
Se podrá acceder a tu aplicación en http://127.0.0.1:1234
.
npm run dev
Construye los archivos de la aplicaciones
Los archivos construidos están en la carpeta build/
.
npm run build