Instalación de Bootstrap V5, NPM y PARCEL

Introducción

La guía oficial sobre cómo incluir y empaquetar el CSS y JavaScript de Bootstrap en un proyecto utilizando Parcel.

A diferencia de empaquetador Vite, PARCEL permite empacar archivos HTML, CSS Y JS sin pertenecer a una librería o framework de javascript (ReactJS, AngularJS,...) como lo es Bootstrap una librería de CSS, además también permite realizar sitios web MPA (Multi Page Application).

Esta documentación se realizó con base a la oficial entregada por Bootstrap en su página web Bootstrap and Parcel, todos los comando que se usaran en este tutorial son ejecutados en la terminal BASH de GIT.

Configuración Inicial

Se esta construyendo un proyecto Parcel con Bootstrap desde cero, por lo que hay algunos requisitos previos y pasos por adelantado antes de que se pueda empezar. Esta guía requiere que se tenga instalado Node.js y cierta familiaridad con el terminal.

Crear una Carpeta de Proyecto y Configurar npm

Se creará la carpeta mi-proyecto e inicializaremos npm con el argumento -y para evitar que haga todas las preguntas interactivas.


                mkdir my-project && cd my-project
                npm init -y

Configuración del Espacio de Trabajo

Ya se ha creado la carpeta my-project e inicializado npm. Ahora también se creará la carpeta src, la hoja de estilos y el archivo JavaScript para completar la estructura del proyecto. Ejecutar los siguiente comandos desde mi-proyecto, o crear 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

Instalación de Parcel

Sólo hay una dependencia de una única herramienta de compilación. Parcel instalará automáticamente los transformadores de lenguaje (como Sass) cuando los detecte. Se Usa la bandera --save-dev para indicar que esta dependencia es sólo para uso de desarrollo y no para producción.

                  
                    npm i --save-dev parcel

Instalación de Bootstrap

Ahora se puede instalar Bootstrap.También se instalará Popper ya que los desplegables, popovers y tooltips dependen de él para su posicionamiento. Si no se planea usar esos componentes, se puede omitir Popper aquí.


              npm i --save bootstrap @popperjs/core

Ahora ya se tiene todas las dependencias necesarias instaladas y se puede poner manos a la obra para configurar Parcel e importar Bootstrap.

Configuración de Parcel

El archivo src/index.html se debe configurar así:


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

Parcel detectará automáticamente que se está usando Sass e instalará el plugin Sass Parcel para soportarlo, se puede instalar manualmente ejecutando manualmente el comando npm i --save-dev @parcel/transformer-sass.

en el archivo package.json añadir como funcionaran los scripts de PARCEL:


            "scripts": {
              "dev": "cd dist && rm -Rf * && cd .. && parcel --lazy --open http://localhost:1234/ --no-source-maps",
              "start": "parcel serve",
              "build": "cd dist && rm -Rf * && cd .. && parcel build --public-url ./ --no-source-maps",
              "test": "echo \"Error: no test specified\" && exit 1"
            },

Script "dev": "cd dist && rm -Rf * && cd .. && parcel --lazy --open http://localhost:1234/ --no-source-maps": inicia el servidor de desarrollo, para ver en tiempo real como se va construyendo la página

cd dist && rm -Rf * && cd ..: desocupa el contenido de la carpeta dist/
parcel: Ejecuta el modo de desarrollo.
--lazy: Esta bandera le indica a PARCEL que sólo vaya construyendo las hojas web a medida que se necesiten, es útil para cuando el sitio tiene muchas hojas y no hace falta que todas estén presentes.
--open http://localhost:1234/ : Abre una pestaña del navegador en la dirección http://localhost:1234/.
--no-source-maps: Con esta bandera PARCEL no genera los archivos map

Script "start": "parcel serve": funciona parecido al script dev.

Script "build": "cd dist && rm -Rf * && cd .. && parcel build --public-url --no-source-maps": genera los archivos de despliegue o de producción./

parcel build: ejecuta la generación de los archivos para producción.
--public-url ./: Añade el prefijo "./" en las rutas absolutas a assets. Útil para despliegues en GitHub Pages.

También en este mismo archivo package.json se debe intercambiar:

                
                  "main": "index.js",

por


              "source": "src/index.html",

Ahora el punto de entrada es el archivo index.html.

Nuevo Para asegurarse que Parcel siempre genere archivos con el mismo nombre (como index.js en lugar de nombres hash), se debe utilizar la configuración avanzada del archivo .parcelrc:, así:

                
                  {
                    "extends": "@parcel/config-default",
                    "transformers": {},
                    "namers": {
                      "parcel-namer-static": {}
                    }
                  }

Este archivo debe estar en el directorio del proyecto junto al archivo package.json

Esta plantilla está configurada de forma tal que es innecesario realizar correcciones en las rutas absolutas de la(s) páginas web.

Desde ahora se puede iniciar Parcel, en la carpeta my-project en el terminal, ejecuta cualquiera de los dos scripts npm recién añadidos:


              npm start


              npm run dev

Importación de BOOTSTRAP

Para la importación de Bootstrap en Parcel se requiere dos importaciones, una en el archivo styles.scss y otra en el main.js.

La importación del CSS de Bootstrap. Añade en el archivo src/scss/styles.scss el siguiente código para importar todo el Sass fuente de Bootstrap.


              // Import all of Bootstrap's CSS
              @import "bootstrap/scss/bootstrap";

La importación del JS de Bootstrap. Añade en el archivo src/js/main.js el siguiente código para importar todo el código fuente de Javascript de Bootstrap:

La importación de código CSS de usuario también se importa en este mismo archivo.


            // Import all of Bootstrap's JS
            import * as bootstrap from 'bootstrap'
            // Import our custom CSS
            import '../scss/styles.scss';

Ahora ya se puede generar una página web utilizando Bootstrap y Parcel.

Compilación del proyecto para Producción

Cuando se haya terminado y se quiera obtener la versión para producción se ejecuta el siguiente comando y los archivos se quedan disponibles en la carpeta dist.


            npm run build

Es fundamental tener precaución con el código JavaScript dentro de la etiqueta <script>, ya que debe tratarse como un módulo. Si no se hace así, las variables que se actualizan con la compilación del código HTML pueden no reflejar esos cambios en las instancias correspondientes en el código JavaScript.

COMENTARIOS

Si tiene alguna inquietud, duda o ha encontrado algún error, por favor infórmelo a través del formulario disponible para este propósito.