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
