Bootstrap & Parcel

La guía oficial para incluir y empaquetar el CSS y JavaScript de Bootstrap en tu proyecto usando Parcel.

On this page

¿Quieres saltar al final? Descarga el código fuente y la demo funcional de esta guía desde el repositorio twbs/examples. También puedes abrir el ejemplo en StackBlitz pero no ejecutarlo porque Parcel no está soportado actualmente allí.

Configuración

Estamos construyendo un proyecto de Parcel con Bootstrap desde cero, así que hay algunos prerrequisitos y pasos preliminares antes de poder empezar realmente. Esta guía requiere que tengas Node.js instalado y cierta familiaridad con la terminal.

Crea una carpeta de proyecto y configura npm. Crearemos la carpeta my-project e inicializaremos npm con el argumento -y para evitar que nos haga todas las preguntas interactivas.
```
mkdir my-project && cd my-project
npm init -y
```
Instala Parcel. A diferencia de nuestra guía de Webpack, aquí solo hay una única dependencia de herramienta de compilación. Parcel instalará automáticamente transformadores de lenguaje (como Sass) a medida que los detecte. Usamos --save-dev para indicar que esta dependencia es solo para uso en desarrollo y no para producción.
```
npm i --save-dev parcel
```
Instala Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper ya que nuestros menús desplegables, popovers y tooltips dependen de él para su posicionamiento. Si no planeas usar esos componentes, puedes omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```

Ahora que tenemos todas las dependencias necesarias instaladas, podemos ponernos a trabajar creando los archivos del proyecto e importando Bootstrap.

Estructura del proyecto

Ya hemos creado la carpeta my-project e inicializado npm. Ahora también crearemos nuestra carpeta src , hoja de estilos y archivo JavaScript para completar la estructura del proyecto. Ejecuta lo siguiente desde my-project, o crea manualmente la estructura de carpetas y archivos que se muestra a continuación.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Cuando termines, tu proyecto completo debería verse así:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

En este punto, todo está en su lugar, pero Parcel necesita una página HTML y un script de npm para iniciar nuestro servidor.

Configurar Parcel

Con las dependencias instaladas y nuestra carpeta de proyecto lista para empezar a programar, ahora podemos configurar Parcel y ejecutar nuestro proyecto localmente. Parcel por diseño no requiere archivo de configuración, pero necesitamos un script de npm y un archivo HTML para iniciar nuestro servidor.

Completa el archivo src/index.html . Parcel necesita una página para renderizar, así que usamos nuestra página index.html para configurar algo de HTML básico, incluyendo nuestros archivos CSS y JavaScript.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
Estamos incluyendo un poco de estilo de Bootstrap aquí con el div class="container" y el <button> para que veamos cuando el CSS de Bootstrap es cargado por Parcel.

Parcel detectará automáticamente que estamos usando Sass e instalará el plugin de Sass para Parcel para soportarlo. Sin embargo, si lo deseas, también puedes ejecutar manualmente npm i --save-dev @parcel/transformer-sass.
Añade los scripts de npm de Parcel. Abre el package.json y añade el siguiente script start al objeto scripts . Usaremos este script para iniciar nuestro servidor de desarrollo de Parcel y renderizar el archivo HTML que creamos después de que se compile en el directorio dist .
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Y finalmente, podemos iniciar Parcel. Desde la carpeta my-project en tu terminal, ejecuta ese script de npm recién añadido:
```
npm start
```

En la siguiente y última sección de esta guía, importaremos todo el CSS y JavaScript de Bootstrap.

Importar Bootstrap

Importar Bootstrap en Parcel requiere dos importaciones, una en nuestro styles.scss y una en nuestro main.js.

Importa el CSS de Bootstrap. Añade lo siguiente a src/scss/styles.scss para importar todo el Sass fuente de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
También puedes import our stylesheets individually if you want. Lee nuestra documentación de importación de Sass para más detalles.
Importa el JS de Bootstrap. Añade lo siguiente a src/js/main.js para importar todo el JS de Bootstrap. Popper se importará automáticamente a través de Bootstrap.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
También puedes importar los plugins de JavaScript individualmente según sea necesario para mantener los tamaños del bundle pequeños:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lee nuestra documentación de JavaScript para más información sobre cómo usar los plugins de Bootstrap.
¡Y ya está! 🎉 Con el Sass y JS fuente de Bootstrap completamente cargados, tu servidor de desarrollo local debería verse así ahora.

Ahora puedes empezar a añadir cualquier componente de Bootstrap que quieras usar. Asegúrate de revisar el proyecto de ejemplo completo de Parcel para ver cómo incluir Sass personalizado adicional y optimizar tu compilación importando solo las partes del CSS y JS de Bootstrap que necesitas.

¿Ves algo mal o desactualizado aquí? Por favor abre un issue en GitHub. ¿Necesitas ayuda para solucionar problemas? Busca o inicia una discusión en GitHub.