Bootstrap y paquete

La guía oficial sobre cómo incluir y agrupar CSS y JavaScript de Bootstrap en su proyecto usando Parcel.

En esta página

¿Quieres saltar hasta el final? Descargue el código fuente y la demostración funcional de esta guía desde el repositorio twbs/examples . También puede abrir el ejemplo en StackBlitz pero no ejecutarlo porque Parcel actualmente no es compatible allí.

Configuración

Estamos construyendo un proyecto Parcel con Bootstrap desde cero, por lo que hay algunos requisitos previos y pasos previos antes de que podamos comenzar realmente. Esta guía requiere que tenga instalado Node.js y cierta familiaridad con la terminal.

Cree una carpeta de proyecto y configure npm. Crearemos la my-projectcarpeta e inicializaremos npm con el -yargumento para evitar que nos haga todas las preguntas interactivas.
```
mkdir my-project && cd my-project
npm init -y
```
Instalar paquete. A diferencia de nuestra guía de Webpack, aquí solo hay una única dependencia de la herramienta de compilación. Parcel instalará automáticamente transformadores de idioma (como Sass) a medida que los detecte. Solemos --save-devseñalar que esta dependencia es solo para uso de desarrollo y no para producción.
```
npm i --save-dev parcel
```
Instalar Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper, ya que nuestros menús desplegables, popovers e información sobre herramientas dependen de ello para su posicionamiento. Si no planea usar esos componentes, puede omitir Popper aquí.
```
npm i --save bootstrap @popperjs/core
```

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

Estructura del proyecto

Ya creamos la my-projectcarpeta e inicializamos npm. Ahora también crearemos nuestra srccarpeta, hoja de estilo y archivo JavaScript para completar la estructura del proyecto. Ejecute lo siguiente desde my-projecto cree 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 haya terminado, su 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 el lugar correcto, pero Parcel necesita una página HTML y un script npm para iniciar nuestro servidor.

Configurar paquete

Con las dependencias instaladas y nuestra carpeta de proyecto lista para que comencemos a codificar, ahora podemos configurar Parcel y ejecutar nuestro proyecto localmente. El paquete en sí no requiere un archivo de configuración por diseño, pero sí necesitamos un script npm y un archivo HTML para iniciar nuestro servidor.

Rellene el src/index.htmlarchivo. Parcel necesita una página para renderizar, por lo que usamos nuestra index.htmlpágina para configurar HTML básico, incluidos 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 <button>para que podamos ver cuándo Webpack carga el CSS de Bootstrap.

Parcel detectará automáticamente que estamos usando Sass e instalará el complemento Sass Parcel para admitirlo. Sin embargo, si lo desea, también puede ejecutar manualmente npm i --save-dev @parcel/transformer-sass.
Agregue los scripts de Parcel npm. Abra package.jsony agregue el siguiente startscript al scriptsobjeto. Usaremos este script para iniciar nuestro servidor de desarrollo de Parcel y renderizar el archivo HTML que creamos después de compilarlo en el distdirectorio.
```
{
   // ...
   "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 my-projectcarpeta en su terminal, ejecute ese script npm recién agregado:
```
npm start
```

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

Importar Bootstrap

La importación de Bootstrap en Parcel requiere dos importaciones, una en nuestro styles.scssy otra en nuestro main.js.

Importar CSS de Bootstrap. Agregue lo siguiente para src/scss/styles.scssimportar todo el Sass de origen de Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
También puede importar nuestras hojas de estilo individualmente si lo desea. Lea nuestros documentos de importación de Sass para obtener más detalles.
Importar JS de Bootstrap. Agregue lo siguiente para src/js/main.jsimportar 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 puede importar complementos de JavaScript individualmente según sea necesario para mantener bajos los tamaños de los paquetes:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lea nuestros documentos de JavaScript para obtener más información sobre cómo usar los complementos de Bootstrap.
¡Y tu estas listo! 🎉 Con la fuente Sass y JS de Bootstrap completamente cargada, su servidor de desarrollo local ahora debería verse así.

Ahora puede comenzar a agregar cualquier componente de Bootstrap que desee usar. Asegúrese de consultar el proyecto de ejemplo completo de Parcel para saber cómo incluir Sass personalizado adicional y optimizar su compilación importando solo las partes de CSS y JS de Bootstrap que necesita.

¿Ve algo incorrecto o desactualizado aquí? Abre una incidencia en GitHub . ¿Necesita ayuda para solucionar problemas? Busque o inicie una discusión en GitHub.