Rustificando Vite: Diseñando una Cadena de Herramientas Híbrida para el Mundo Real

Vamos a hablar sobre cómo escribir JavaScript y cómo usar TypeScript. {{^}}Vamos a hablar sobre cómo usar TypeScript y cómo usar TypeScript, y vamos a hablar sobre cómo usar TypeScript para mejorar la web. {{^}}Vamos a hablar sobre cómo usar TypeScript para mejorar la web. Y vamos a hablar sobre cómo usar TypeScript para mejorar la web. Y vamos a hablar sobre cómo usar TypeScript para mejorar la web. Así que comencemos. ¿Cuál es tu framework favorito? ¿Cuál es tu favorito? Dímelo en tres, dos, uno. Scalabr. Sí, uno de estos, posiblemente.

¿Sí? Algo que no está en la lista, de lo que podemos hablar más tarde. Está bien. Pero la cuestión es, ¿qué tienen todos en común? Bueno, todos están construidos con una cierta tecnología, ¿verdad? Vite, el único. Podrías conocer Vite por este logo, ¿verdad? Y Vite ha cambiado un poco. ¿Quién aquí no está usando Vite? Nadie. Uno, dos, tres. No te creo.

No, no, de ninguna manera. De ninguna manera. Pero está bien. Así que sí, en el pasado, Vite en realidad tenía un par de herramientas bajo el capó que se usaban para empaquetar tu código, para pre-construirlo, para hacer que el servidor de desarrollo funcionara. Así que teníamos ESBuild para pre-empaquetado, para transformación, para minificación, rollup, ¿verdad? Algunos aún podrían saber eso. Empaquetado, ¿verdad? El sistema de plugins, todos tus frameworks favoritos los plugins son plugins de rollup hasta cierto punto también. Y también control de fragmentos muy limitado. Y luego para los de React aquí, también había SWC que podrías usar, como una alternativa para transformaciones, para React fast refresh, etcétera. Pero el problema es, bueno, estas son tres herramientas juntas en una herramienta de construcción más grande. Esto ya suena como dolor, ¿verdad? Así que en algún momento, pensamos, ¿por qué no unificar toda esta capa, la capa subyacente del empaquetador? Y eso significó lo siguiente. Tomamos esto, lo quitamos todo, cambiamos el logo, porque eso sucedió en Vite 8 eventualmente, y luego está rolldown.

Un empaquetador para gobernarlos a todos. Entonces te preguntas, ¿por qué hay otro empaquetador? ¿Por qué no podemos usar uno de estos que ya existen? O como TurboPack, de lo que Tobias habló antes, o Webpack, etcétera. Bueno, es complicado, ¿verdad? En primer lugar, múltiples empaquetadores bajo el capó, por supuesto, complejidad. Es un gran problema para los mantenedores de Vite, los contribuyentes, pero también para los desarrolladores, porque introduce inconsistencias entre el desarrollo y la producción, lo cual es un fastidio. Luego también hay limitaciones. Algunos empaquetadores dicen, oh, no sabemos cómo implementar A, B, C. Así que ni rollup ni ASBuilt querían introducir ciertas características, porque dijeron, hey, eso está fuera de alcance. Y eso está bien, pero estas son características, Vite y tal vez todo lo que necesitas. Y luego, por supuesto, el tiempo. También sabemos que en los días pasados, los tiempos de Webpack tomaban mucho tiempo. Ahora las construcciones son más rápidas, pero podrían ser aún más rápidas ahora. Así que, por supuesto, lo que hacemos es rehacer todo en Rust. Somos desarrolladores 10x. Vamos. Bromas aparte, es hora de conocer rolldown.

Y sí, eso simplemente rodó a propósito. Así que rolldown en sí es más que simplemente, hey, tomemos rollup y portémoslo a Rust, porque no es tan fácil. En cambio, decidimos combinar las mejores partes que tenemos del arte previo. Así que la API de rollup, todos los plugins siguen siendo compatibles, ¿verdad?, muy importante. Realmente no tienes que migrar cosas de un lado a otro. Eso sería como un gran cambio para todos. Velocidad y también comportamiento para mí es construido, ¿verdad? Cosas como inject, define, etcétera. Y también nos inspiramos, nos inspiramos en Webpack para tener una fragmentación más avanzada. Así que puedes asegurarte de que tus aplicaciones JavaScript sean lo más eficientes posible.

Puedes dividirlas en archivos según sea necesario. Y también hay más, por supuesto, más características, como tipos de módulos, optimización de barril perezoso optimización, HMR incorporado, generación de mapas de entrada, etcétera, etcétera, etcétera. Hay mucho. Y también, por supuesto, hay un minificador incorporado y transformadores. Puedes tener reducción de sintaxis, o tu TypeScript se transfiere a JavaScript, y tu código se minimiza, por lo que tienes un paquete muy eficiente al final.

Pero también, sí, se siente un poco extraño, ¿verdad? Despierta, hay otra reescritura en Rust. Bueno, al menos no está prohibido. Entonces, lo que podemos hacer aquí y por qué lo hicimos al final es que queremos asegurarnos de que el paquete basado en Rust también funcione bien con el ecosistema de JavaScript. Cómo hicimos esto es que añadimos algunas más ventajas para los autores de plugins, ¿verdad? Y una de las cosas son los filtros de gancho para plugins. Así que los plugins funcionan tal como son, pero luego tienes que llamar al plugin de JavaScript para cada archivo para cada verificación, y eso es un poco meh, ¿verdad? Así que en su lugar, dijimos, mira, digamos que tenemos este plugin muy simple de rolldown o rollup. Son incompatibles, ¿verdad? Son compatibles, así que vamos a crear un nuevo marco llamado Swangular. Y simplemente decimos, OK, transforma algo. Si el ID no termina con Swangular, entonces regresa y de lo contrario haz alguna transformación real. Sí, Swangular es un gran nombre, lo sé. Pero el problema es que esta función de transformación se llama para cada archivo individual, y eso es un montón de archivos, te lo digo, en tus módulos de Node. Así que en su lugar, lo que hacemos es, bueno, tomamos esto, pero lo extraemos en una función de filtro para decir, OK, solo ejecuta esto si el ID incluye Swangular. Y ahora esto también puede ser analizado por Rust, así que Rust no tiene que llamarlo todo el tiempo y decir, OK, solo para estas condiciones, y estamos bien. Y esa es la magia detrás de esto. Así que menos sobrecarga, y funciona en rolldown.vite e incluso en rollup. Sí, es importante en todas partes, ¿verdad? Y si no está allí, está bien. Simplemente será ignorado. Además, Vite ha sido, bueno, Rustificado, por supuesto, así que los plugins nativos de Rust están cubiertos. Cosas como la resolución de módulos, sí, encontrando todos estos alias, etcétera, etcétera. TypeScript JSX transform, lo mencioné antes. Reemplazos definidos, ¿verdad?, como nodes n, por ejemplo. Importar metaglob si necesitas una cierta expresión allí para ello, también variables de entrada dinámicas, así que cosas como importar páginas y luego el nombre, punto JS, o con la sintaxis de plantilla aquí. Y eso no es el final, por supuesto. Lo hicimos con el empaquetador. Tenemos el subyacente, bueno, minificador, transformador, o XE, etcétera. Y basado en eso, tenemos un lintern y un formateador. Todo eso junto, puedes realmente usar en una cadena de herramientas llamada V+. Pero eso es tema para otra charla.