Hemos migrado nuestros tres proyectos frontend de Parcel a Vite, y el proceso fue... fluido.
Tenemos tres proyectos frontend principales en Logto: la experiencia de inicio de sesión, la Consola y la vista previa en vivo. Estos proyectos están todos en TypeScript, React, y módulos SASS; en total, tienen alrededor de 100K líneas de código.
Nos encantaba Parcel por su simplicidad y configuración sin necesidad de ajustes. Todavía puedo recordar el día en que me asombré de lo fácil que fue configurar un nuevo proyecto con Parcel. Puedes simplemente ejecutar parcel index.html y boom, todas las dependencias necesarias están instaladas y el proyecto está en marcha. Si eres un desarrollador "experimentado", quizá te sientas de la misma manera comparándolo con los viejos tiempos de configuración con Gulp y Webpack. Parcel es como una varita mágica.
La simplicidad de Parcel fue la razón principal por la que nos quedamos con él tanto tiempo, aunque a veces podía ser caprichoso. Por ejemplo:
Entonces, ¿por qué decidimos migrar a otra cosa?
Alguien incluso abrió una discusión para preguntar si Parcel está muerto. La respuesta oficial es que no, Parcel sigue vivo, pero está en un estado de "estamos trabajando en una gran refactorización y no tenemos tiempo para lanzamientos menores". Para nosotros, es como una "muerte de pato": La versión más reciente que podemos usar es de hace más de un año, y no sabemos cuándo se lanzará la próxima versión. Parece que está muerto, actúa como si estuviera muerto, así que para nosotros está muerto.
Conocíamos Vite por Vitest. Hace varios meses, estábamos cansados del soporte de ESM de Jest (en las pruebas) y queríamos probar algo nuevo. Vitest nos ganó el corazón con el soporte nativo de ESM y la compatibilidad con Jest. Tiene una experiencia de desarrollador impresionante, y está impulsado por Vite.
Puedes tener configuraciones diferentes en tu proyecto, pero generalmente encontrarás reemplazos de plugins a medida que el ecosistema de Vite florece. Estas son nuestras configuraciones al momento de la migración:
Comenzamos la migración creando un nuevo proyecto de Vite y experimentando con él para ver cómo funcionaba. El proceso fue fluido y la migración real solo tomó unos pocos días.
Vite tiene soporte listo para usar para monorepo, ESM, TypeScript, React, y SASS. Solo necesitábamos instalar los plugins y configuraciones necesarias para hacerlo funcionar.
Vite tiene soporte incorporado para alias de ruta, por ejemplo, en nuestro tsconfig.json:
Solo necesitábamos agregar la misma resolución en nuestro vite.config.ts:
Ten en cuenta que la ruta de reemplazo debe ser una ruta absoluta, aunque es relativa a la raíz del proyecto. Alternativamente, puedes usar el plugin vite-tsconfig-paths para leer los alias de rutas desde el tsconfig.json.
Aunque Vite tiene soporte incorporado para HMR, es necesario instalar un plugin para habilitar React Fast Refresh. Usamos el plugin @vitejs/plugin-react que es proporcionado por el equipo de Vite y tiene un gran soporte para características de React como Fast Refresh:
Usamos el plugin vite-plugin-svgr para convertir SVGs en componentes de React. Es tan simple como agregar el plugin a la configuración de Vite:
Sin embargo, no especificamos bajo qué condición los SVGs deberían ser convertidos a componentes React, por lo que todas las importaciones fueron convertidas. El plugin ofrece una mejor configuración por defecto: solo convierte los SVGs que se importan con la extensión .svg?react. Actualizamos nuestras importaciones en consecuencia.
Aunque Vite tiene soporte incorporado para módulos SASS, hay algo de lo que debemos ocuparnos: cómo se formatean los nombres de clase. Puede ser problemático para los usuarios y para nuestras pruebas de integración si los nombres de las clases no están formateados consistentemente. La configuración de una sola línea en el vite.config.ts puede resolver el problema:
Por cierto, Parcel y Vite tienen diferentes formas de importar archivos SASS:
La sintaxis * as, sin embargo, funciona en Vite, pero causará la pérdida de nombres de clase modularizados cuando usas claves dinámicas para acceder al objeto styles. Por ejemplo:
Dado que Vite aprovecha Rollup por debajo, podemos usar el plugin oficial @mdx-js/rollup para soportar MDX junto con sus plugins. La configuración se ve así:
El plugin remarkGfm se utiliza para soportar Markdown con Sabor GitHub, y el plugin rehypeMdxCodeProps se utiliza para pasar las props a los bloques de código en los archivos MDX como lo hace Docusaurus.
Nos gustaría usar diagramas Mermaid en nuestros archivos MDX como en otros lenguajes de programación. El uso debe ser tan simple como otros bloques de código:
Debe renderizarse como:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M72.451%2c62L67.598%2c66.167C62.746%2c70.333%2c53.041%2c78.667%2c48.188%2c86.333C43.336%2c94%2c43.336%2c101%2c43.336%2c104.5L43.336%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_C_1' d='M135.338%2c62L140.191%2c66.167C145.043%2c70.333%2c154.748%2c78.667%2c159.601%2c86.333C164.453%2c94%2c164.453%2c101%2c164.453%2c104.5L164.453%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_D_2' d='M43.336%2c166L43.336%2c170.167C43.336%2c174.333%2c43.336%2c182.667%2c47.683%2c190.566C52.029%2c198.465%2c60.723%2c205.929%2c65.069%2c209.662L69.416%2c213.394'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_C_D_3' d='M164.453%2c166L164.453%2c170.167C164.453%2c174.333%2c164.453%2c182.667%2c160.106%2c190.566C155.76%2c198.465%2c147.066%2c205.929%2c142.72%2c209.662L138.373%2c213.394'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(103.89453125%2c 35)' id='flowchart-A-0' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eA%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(43.3359375%2c 139)' id='flowchart-B-1' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eB%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(164.453125%2c 139)' id='flowchart-C-3' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eC%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(103.89453125%2c 243)' id='flowchart-D-5' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eD%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Dado que nuestra aplicación soporta temas claros y oscuros, codificamos un poco para hacer que los diagramas Mermaid funcionen con el tema oscuro. Se crea un componente React:
useTheme es un hook personalizado para obtener el tema actual del contexto. La librería mermaid se importa de forma asíncrona para reducir el tamaño de carga durante la carga inicial de la página.
Para el bloque de código en el archivo MDX, tenemos un componente unificado para hacer el trabajo:
Finalmente, definimos el proveedor MDX de la siguiente manera:
Esto no es algo específico de Vite, sigue siendo digno de mención ya que actualizamos nuestras páginas para usar la carga diferida durante la migración, y nada se rompió después de eso.
React tiene una función incorporada React.lazy para cargar componentes de forma diferida. Sin embargo, puede causar algunos problemas cuando estás iterando rápidamente. Creamos una pequeña biblioteca llamada react-safe-lazy para resolver los problemas. Es un reemplazo directo de React.lazy y una explicación detallada se puede encontrar en esta publicación en el blog.
Hay un plugin ordenado llamado vite-plugin-compression para producir activos comprimidos. Soporta tanto la compresión gzip como brotli. La configuración es simple:
Una gran característica de Vite (o del Rollup subyacente) es la de los fragmentos manuales. Mientras que React.lazy se usa para la carga diferida de componentes, podemos tener más control sobre los fragmentos especificando los fragmentos manuales para decidir qué componentes o módulos deben agruparse.
Por ejemplo, podemos usar primero vite-bundle-visualizer para analizar el tamaño del paquete y las dependencias. Luego podemos escribir una función adecuada para dividir los fragmentos:
A diferencia de la compilación de producción, Vite NO agrupará tu código fuente en el modo de desarrollo (incluidas las dependencias vinculadas en el mismo monorepo) y tratará cada módulo como un archivo. Para nosotros, el navegador cargará cientos de módulos por primera vez, lo que parece una locura, pero en realidad está bien en la mayoría de los casos. Puedes ver la discusión aquí.
Si esto es un problema para ti, una solución alternativa (pero no perfecta) es listar las dependencias vinculadas en la opción optimizeDeps del vite.config.ts:
Esto "pre-agrupará" las dependencias vinculadas y hará que el servidor de desarrollo sea más rápido. El inconveniente es que HMR puede no funcionar como se espera para las dependencias vinculadas.
Además, usamos un proxy que sirve los archivos estáticos en producción y retransmite las solicitudes al servidor de Vitest en desarrollo. Tenemos algunos puertos específicos configurados para evitar conflictos, y también es fácil de configurar en el vite.config.ts:
A diferencia de Parcel, Vite usa un enfoque moderno para manejar las variables de entorno utilizando import.meta.env. Cargará automáticamente los archivos .env y reemplazará las variables en el código. Sin embargo, requiere que todas las variables de entorno se prefijen con VITE_ (configurable).
Mientras usábamos Parcel, simplemente reemplazaba las variables process.env sin comprobar el prefijo. Así que encontramos una solución usando el campo define para facilitar la migración:
Esto nos permite agregar gradualmente el prefijo a las variables de entorno y eliminar el campo define.
¡Eso es todo! Hemos migrado con éxito nuestros tres proyectos frontend de Parcel a Vite, y esperamos que esta breve historia pueda ayudarte con tu migración. Así es como luce la configuración al final: