Instalación de Bootstrap V5, NPM y VITE
Introducción
Esta documentación se realizó con base a la oficial entregada por Bootstrap en su página web Bootstrap and Vite, todos los comando que se usaran en este tutorial son ejecutados en la terminal BASH de GIT.
Se va a crear un proyecto Bootstrap con Vite desde cero, por lo que es necesario cumplir con algunos requisitos previos y seguir ciertos pasos antes de comenzar. Esta guía asume que se tiene instalado Node.js y que se tiene cierta experiencia con el uso del terminal.
Configuración Inicial
Crear una carpeta de proyecto e inicializar npm: Se creará la carpeta "mi-proyecto" y se inicializará npm con el argumento -y para evitar que haga las preguntas interactivas. Es importante señalar que el nombre de la carpeta puede ser cualquier otro según las necesidades del proyecto.
mkdir mi-proyecto && cd mi-proyecto
npm init -y
Instalación Vite: Aquí sólo hay una dependencia de la herramienta de compilación. Se Usará --save-dev para indicar que esta dependencia es sólo para uso de desarrollo y no para producción.
npm i --save-dev vite
Instalar Bootstrap: Se puede instalar Bootstrap. Además, se instalará Popper, ya que es necesario para el posicionamiento de los desplegables, popovers y tooltips. Si no se tiene previsto usar esos componentes, se puede omitir la instalación de este último.
npm i --save bootstrap @popperjs/core
Instalación dependencias adicionales: Además de Vite y Bootstrap, es necesario contar con otra dependencia (Sass) para importar y empaquetar correctamente el CSS de Bootstrap.
npm i --save-dev sass
Ahora se tiene todas las dependencias necesarias instaladas y configuradas, ya se puede trabajar creando los archivos del proyecto e importando Bootstrap.
Configuración del Espacio de Trabajo
La carpeta "mi-proyecto" ya ha sido creada y se ha inicializado npm. Ahora, se procederá a crear la carpeta "src", el archivo de hojas de estilo y el archivo JavaScript para completar la estructura del proyecto. Para llevar a cabo esto, ejecuta el siguiente código dentro de "mi-proyecto".
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js
Cuando se haya terminado, el proyecto completo debería tener este aspecto:
mi-proyecto/
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ | └── styles.scss
| └── index.html
├── package-lock.json
├── package.json
└── vite.config.js
En este punto, todo está en el lugar correcto, pero Vite no funcionará porque aún no se ha rellenado el archivo vite.config.js.
Configuración de Vite
En el archivo vite.config.js, se llena con:
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
build: {
outDir: '../dist'
},
server: {
port: 8080
}
}
El archivo src/index.html, se llena con la siguiente plantilla:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Mientras que el archivo package.json debe quedar configurado así:
{
"scripts": {
"start": "vite",
"build": "vite build",
"test": "echo \"Error: no test specified\" && exit 1"
},
}
Iniciar el proyecto con vite: npm start, en el navegador
Importación Bootstrap v5
Importación de archivos CSS de Bootstrap: En el archivo src/scss/styles.scss se importa los estilos CSS:
// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";
Importación del archivo JavaScript de Bootstrap: El archivo src/js/main.js se carga e importa los CSS y JS de Bootstrap agregando.
// Import our custom CSS
import '../scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
También puede importar plugins JavaScript individualmente según sea necesario para mantener el tamaño de los paquetes bajo:
import Alert from 'bootstrap/js/dist/alert';
// o, especificar cual plugin es necesario:
import { Tooltip, Toast, Popover } from 'bootstrap';
Con las fuentes Sass y JS de Bootstrap completamente cargadas, el servidor de desarrollo local debería tener ahora este aspecto:
Instalación Plugin PurgeCSS y Plugin HTML
npm i vite-plugin-purgecss
npm i vite-plugin-html
El plugin purgecss elimina toda clase de CSS que no sea utilizada y el plugin HTML elimina todo espacio extra o cambio de línea del documento HTML y deja todo el código en una sola línea.
El archivo vite.cfg.js se debe configurar asi:
import htmlPurge from 'vite-plugin-purgecss'
import { createHtmlPlugin } from 'vite-plugin-html'
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
plugins:[
htmlPurge(),
createHtmlPlugin({
minify:true,
removeComments:true,
colapseWhitespaces:true
})
],
build: {
outDir: '../dist',
emptyOutDir:true
},
server: {
port: 8080
}
}
Configuraciones Finales
El archivo package.json, finalmente se debe tener asi:
{
"name": "mi-proyecto",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "vite",
"build": "vite build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.64.1",
"vite": "^4.4.7",
"vite-plugin-html": "^3.2.0"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.0",
"vite-plugin-purgecss": "^0.2.12"
}
}
Compilación del proyecto para Producción
Una vez finalizado el desarrollo, para generar la versión optimizada para producción, se debe ejecutar el comando npm run build. Esto procesará los archivos y guardará el resultado en la carpeta dist, listo para su despliegue.
Corrección del Archivo index.html
Se debe corregir las rutas de los archivos CSS y JS agregando un punto (.) antes del slash (/). La estructura en la sección <head> del archivo debe quedar de la siguiente manera:
<head>
...
<script type="module" crossorigin src="./assets/index-e9ba998b.js"></script> y
<link rel="stylesheet" href="./assets/index-1b619488.css">
</head>
Si se tienen imágenes que están guardadas en la carpeta assets/, también se debe corregir la dirección colocándole el punto antes del slash (/) a su dirección, p. ej. ./assets/sun-86eb3c88.svg.
Si la imagen se encuentra en la etiqueta <script>, esta no aparecerá en la carpeta assets/, se debe copiar en esta carpeta y su dirección se debe cambiar p. ej de ./images/moon.svg a ./assets/moon.svg