En este tutorial se va a mostrar cómo Migrar una aplicación React de Webpack a Vite.
Tabla de contenidos
¿Qué es Vite?
Vite es una «herramienta de front-end de próxima generación», como afirman sus mantenedores. Servidor de desarrollo instantáneo, recarga rápida de módulos en caliente (hot reload), configuración sencilla y compilaciones de producción optimizadas: todo está ahí.
Pero… la documentación de Vite no dice cómo migrar su aplicación Webpack existente 🤷 ¡No se preocupe! ¡En esta guía, lo superaremos juntos!
Migrar una aplicación React de Webpack a Vite
Cambiar el repositorio a ES modules
En el fichero paquete.json, agregue la siguiente entrada:
"type": "module",
Instalar Vite y sus plugins
Aquí el comando depende del gestor de módulos node que uses, ya sea npm o yarn. Se guardarán como módulos de desarrollo.
npm i --save-dev vite @vitejs/plugin-react vite-plugin-html
o
yarn add vite @vitejs/plugin-react vite-plugin-html --dev
Reemplazar los scripts
En el fichero package.json, probablemente tendrá scripts similares a estos:
"build": "NODE_ENV=production webpack", "dev": "NODE_ENV=development webpack serve",
El comando build, invocado por npm run build o yarn build, construye su aplicación para el entorno de producción. El comando dev inicia un servidor de desarrollo.
Estos scripts deben ser reemplazados con:
"build": "vite build", "dev": "vite serve",
Además de eso, puede agregar un comando adicional:
"preview": "vite preview"
El comando preview iniciará un servidor que ejecuta la aplicación creada para producción.
Bien, ahora ejecutemos el servidor de desarrollo mediante el comando npm run dev y la salida será similar a esta:
vite v2.9.1 dev server running at: > Local: http://localhost:3000/ > Network: use --host to expose ready in 232ms.
Como se puede apreciar, es muy rápido.
Enseñar a Vite dónde está root
Si inició el servidor de desarrollo ahora, Vite buscará index.html en el directorio raíz de su proyecto o root. Si está en otro lugar, Vite no podrá encontrarlo y, en su lugar, mostrará una página vacía.
Para solucionar esto, debe mover index.html a su directorio raíz o especificar un directorio raíz diferente para que Vite busque index.html dentro de él. En este proyecto en concreto, el fichero se encuentra en src/index.html.
Puede hacer esto agregando la ruta del directorio raíz a sus comandos, así:
"build": "vite build src", "dev": "vite serve src",
Sin embargo, también se puede hacer esto creando un archivo vite.config.js en la raíz de su proyecto y ahí especificar el directorio root.
De todos modos, este fichero se necesitará dentro de poco, entonces, ¿por qué no crear uno ahora para mantener toda la configuración en un solo lugar? La recomendación es hacerlo así siempre.
import { defineConfig } from 'vite';
export default defineConfig({
root: 'src',
build: {
// Relative to the root
outDir: '../dist',
},
});
Configurar vite-plugin-html
Ahora que Vite sabe dónde encontrar el archivo index.html, intentará analizarlo y entonces puede aparecer un error como este:
¿Cómo se puede lidiar con esto? Se puede usar la opción HtmlWebpackPlugin‘s templateParameters para inyectar dinámicamente un título personalizado y otra información en el archivo index.html:
<title><%= title %></title>
new HtmlWebpackPlugin({
template: 'index.html',
templateParameters: {
title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
},
}),
Afortunadamente, se puede hacer lo mismo con el plugin vite-plugin-html. Para ello, en el fichero de configuración vite.config.js, se debe añadir lo siguiente:
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig({
// …
plugins: [
createHtmlPlugin({
inject: {
data: {
title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
},
},
}),
],
});
Agregar un módulo de entrada al archivo index.html
En este punto, el archivo index.html debería funcionar correctamente. ¡Pero la aplicación sigue sin cargarse!
Si usó Webpack, probablemente también haya usado html-webpack-plugin para manejar la inyección de etiquetas <script> con su(s) módulo(s) de entrada a index.html.
Vite no inyectará estas etiquetas automáticamente por lo que deben agregarse manualmente. Por ejemplo:
<script type="module" src="./index.jsx"></script>
Después de hacer esta paso ya se ve como empieza a funcionar algo:
Configure @vitejs/plugin-react
Bien, como puedes ver, todavía no hemos llegado. Necesitamos configurar @vitejs/plugin-react para que funcione con React.
Si aún usaba el tiempo de ejecución JSX clásico, es posible que la aplicación ya se cargue en este punto, pero querrá seguir estos pasos de todos modos. Este complemento no solo manejará el tiempo de ejecución automático de JSX (gracias al cual no necesita importar manualmente React en cada archivo), sino que también agregará funciones como Fast Refresh, habilitará la integración de Babel y mucho, mucho más.
Agréguelo a su archivo vite.config.js así:
import react from '@vitejs/plugin-react';
export default defineConfig({
// …
plugins: [
// …
react({
// Use React plugin in all *.jsx and *.tsx files
include: '**/*.{jsx,tsx}',
}),
],
});
Babel plugins
Es posible que no necesite Babel en absoluto, ya que @babel/preset-env y @babel/preset-react no sirven.
Pero a veces los complementos de Babel aún pueden ser útiles. Por ejemplo, hay un módulo para eliminar PropTypes que puede usar para hacer que el tamaño del paquete sea un poco más pequeño, y hay un módulo dedicado para componentes con estilo que facilita el desarrollo y las pruebas, entre otras cosas, agregando nombres de visualización de componentes.
@vitejs/plugin-react vendrá al rescate aquí, con la opción babel. Por ejemplo, para agregar el complemento babel-plugin-styled-components:
react({
// …
babel: {
plugins: ['babel-plugin-styled-components'],
},
},
Manejo de archivos estáticos
De forma predeterminada, los archivos del directorio public ubicados en el directorio root se copiarán en el momento de la compilación. Si tiene estos archivos en otro lugar, puede usar la opción publicDir para especificarlo:
export default defineConfig({
// …
publicDir: '../public',
});
Una vez terminada la migración aún nos podemos encontrar con otro problema bastante común.
El problema de process.env.*
Si se está usando process.env.NODE_ENV en algún lugar de la aplicación se producirá el siguiente error:
Uncaught ReferenceError: process is not defined
En Vite, puedes usar import.meta.env.* en su lugar. Por ejemplo, process.env.NODE_ENV debe ser reemplazado porimport.meta.env.NODE_ENV.
Espero que el artículo «Migrar una aplicación React de Webpack a Vite» te haya sido de ayuda ❤️