Este es un artículo fantástico de Julia Evans sobre cómo lidiar con las herramientas modernas de front-end. Julia ha realizado varios proyectos de Vue y, por lo general, no utiliza ningún proceso de compilación:
Normalmente tengo un index.html presentar un script.js archivo, y luego hago un <script src="https://css-tricks.com/some-notes-on-using-esbuild/script.js"> y eso es.
Lo que creo que es increíble y probablemente significa que esos proyectos durarán muchísimo tiempo. Pero, entiendo el deseo de pasar a algunas herramientas de desarrollo más modernas, al menos para desbloquear todo el ecosistema de npm. Básicamente, Julia quería hacer:
import Vue from 'vue';Eso directamente implica npm y un paquete, porque esa sintaxis es específica del paquete (es una sintaxis de módulos ES no válida). Esto solía implicar un paquete web, un paquete acumulativo o un paquete, pero eso está empezando a cambiar y sugiero fuertemente Vite en lugar de.
Pero Julia no quería buscar herramientas que hicieran demasiado ():
Pero dejé de usar esas herramientas y volví a mi antiguo <script src="https://css-tricks.com/some-notes-on-using-esbuild/script.js"> sistema porque no entiendo lo que esos vue-cli-service y vite están haciendo y no me sentía seguro de poder arreglarlos cuando se rompen. Así que prefiero ceñirme a una configuración que realmente entiendo.
Entonces, como Vite era demasiado, Julia buscó esbuild. No puedo decir que entiendo los detalles, pero Vite usa esbuild internamente para algunas cosas:
Vite usa esbuild en lugar de Rollup para el empaquetado previo de dependencias. Esto da como resultado mejoras significativas en el rendimiento en términos de inicio de servidor en frío y reagrupación en invalidaciones de dependencia.
Entonces, buscar esbuild directamente es un paso hacia abajo en la escalera de la complejidad.
Estuvo tan cerca de ser un jonrón, pero, por supuesto, la naturaleza malditamente compleja del ecosistema de front-end volvió a golpear. La supuesta copia de Vue que esbuild tomó del import Vue from 'vue'; era vue.runtime.esm.js, que es la versión de Vue diseñada para ejecutarse en el navegador, no la versión que incluye un compilador. Ughghk. Parece que deberían ser dos paquetes separados o algo así. Pero Julia finalmente luchó contra eso y fue una victoria:
No entiendo todo esbuild está haciendo, pero se siente mucho más accesible y transparente que el [webpack]-basadas en herramientas que he usado anteriormente.
Todo esto es una razón más por la que sigo siendo optimista con Skypack. Puedes usar moderno import declaraciones como esa y todavía no necesitan un proceso de construcción en absoluto.
Enlace directo →