¿El asesino de Webpack 🔪? esbuild, el empaquetador más RÁPIDO. ⚡

Поделиться
HTML-код
  • Опубликовано: 23 июл 2024
  • esbuild es un empaquetador de aplicaciones Javascript extremadamente rápido que viene a sustituir a webpack y parcel.
    Cuando hablamos de rápido... estamos hablando que puede ser de 10 a 100 veces más rápido que los empaquetadores actuales.
    ¿Cómo lo consigue? Pues está escrito en Go, un lenguaje que compila a código nativo. Además todos sus procesos los hace en paralelo y con el mínimo número de pasos posibles. Y, claro, ha sido escrito poniendo foco precisamente en que sea rápido.
    Por si esto fuera poco trae "de fábrica" cosas tan interesantes como soporte a JSX, EcmaScript 2020 y Typescript.
    Aunque por ahora no está en una versión estable (todavía no ha llegado a la 1.0.0) tiene pinta que cada vez más vamos a ver a algunos proyectos apostar por ello.
    ~ Segmentos 📹
    00:00 - ¿Qué es esbuild y por qué es tan interesante?
    06:30 - Iniciando un proyecto con esbuild
    09:08 - Preguntas del chat I
    11:51 - Probando React y ReactDOM, soporte JSX sin configuración
    19:08 - Usando el bundle de esbuild en una página web
    24:30 - Las comillas de la concordia para la variable de entorno
    32:25 - Transformación de Javascript del futuro SIN Babel y sin configuración
    35:12 - Indicando los navegadores que soportamos con target
    39:52 - Probando EcmaScript Modules y creación de chunks
    52:59 - Compilando Typescript sin configuración con esbuild
    55:28 - Preguntas del chat II
    57:02 - Cómo hacer import de React para favorecer el tree shaking
    01:06:02 - Probando a importar archivos css
    01:08:40 - Importando archivos JSON con esbuild
    01:11:10 - Importando archivos de texto con esbuild
    01:13:24 - Preguntas del chat III
    01:19:42 - Build API de esbuild
    01:25:28 - Conclusiones sobre esbuild
    ~ Etiquetas 🏷
    #esbuild #webpack #midudev
  • НаукаНаука

Комментарии • 39

  • @midudev
    @midudev  3 года назад +5

    ¡Cuéntame qué te ha parecido esbuild! ¿Has ALUCINADO 😱 como yo? Con lo rrrrrapidísimo que es. ⚡Creo que este es el FUTURO de los empaquetadores de aplicaciones WEB. 📦 ¿Tú qué opinas?

    • @YahyrEnriqueParedesArteaga
      @YahyrEnriqueParedesArteaga 3 года назад

      Me gusta tus live, si puedes hecharte una repasada de react con nuxt con talwind muy agradecido!

    • @LorenzoJimenez
      @LorenzoJimenez Год назад

      ¿cómo migrar de Create React App a ESBuild?

  • @guillesurfer
    @guillesurfer 2 года назад +1

    Man, cada video que veo me dan ganas de seguir viendo más! Excelentes todos!

  • @joelaravena3726
    @joelaravena3726 3 года назад +3

    Gracias por el LIVE, te extrañabamos por aqui Crack !!!

    • @midudev
      @midudev  3 года назад

      Gracias por el apoyo Joel!!! 🤗

  • @v4ldevrr4m47
    @v4ldevrr4m47 3 года назад

    muchas gracias midudev, viendo la tematica de builds ayer en la JSNATION , Yo todavia siendo un vanilla user y apuntando a svelte empece a ver los de los builds y de hecho no domino todo el potencial de los mismos . En fin lo que quiero es felicitarte porque en mi recorrido por youtube no veo a mas nadie hablando de esto en espanol. otra vez gracias crack!!

  • @internoma
    @internoma 3 года назад +5

    Me ha gustado mucho la sesión. Respecto a GoLang compila a código máquina, como C++, por eso es extremadamente rápido.

    • @midudev
      @midudev  3 года назад

      👍 Muchas gracias Alfredo!!!!

  • @alvamajo4640
    @alvamajo4640 2 года назад +1

    una JOyita!

  • @genaroibc
    @genaroibc Год назад

    Que grande Midu, se adelantó a su tiempo ❤

  • @lacuevadelinsecto
    @lacuevadelinsecto 2 года назад

    Hola!
    Recién llego al canal y este video me ha parecido alucinante.
    Quisiera consultarte si es posible utilizar esbuild para empequetar aplicaciones con generadas Express Generator, por ejemplo las que contienen Handlebars o EJS.
    Mi pregunta surge porque estuve intentando realizar un build, y la verdad no conseguí una salida funcional, y tanto los builds como los estáticos js y css no se empaquetan.
    Desde ya muchas gracias por la respuesta!

  • @jordy4050
    @jordy4050 2 года назад

    mañana se cumple un año desde el video midu 🎊🎊, lo recomiendas para usarlo en un proyecto de react?

  • @jmandiol
    @jmandiol 2 года назад

    Hola, consulta vi tu terminal de mac y que themas estas usando me gusto como está para usarla

  • @bryanmora4996
    @bryanmora4996 3 года назад

    Como se llama la extension que muestra el tamaño de los imports?

  • @yoelnacho
    @yoelnacho 3 года назад +5

    Pasamos los 200 likes, se viene la charla de vite @midudev 😎

    • @midudev
      @midudev  3 года назад +4

      Cuenta con ella!!!!

  • @guillermogomez4992
    @guillermogomez4992 3 года назад +1

    ¿cuántos años tienes programando amigo? Simple curiosidad, eres un PRO, yo apenas empiezo. Ah y coméntame si tienes cursos, los compraría con mucho gusto. ¡Saludos!

  • @claudioviajando6184
    @claudioviajando6184 3 года назад +1

    Claro, las primeras barras escapan a las segundas para que se muestren y la tercera barra escapa a la comilla doble, con lo que la salida queda -> /“production”/

    • @midudev
      @midudev  3 года назад +2

      jajaja ahora está clarísimo pero en directo no se veía tan claro! 😆

  • @jdavid.flores
    @jdavid.flores 3 года назад +1

    Por qué mi aplicación React tarda mucho en el npm run build.. tarda hasta 20min!!
    Utilizo una plantilla comprada y este es el comando que está en el package.json:
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-app-rewired build",

    • @midudev
      @midudev  3 года назад +1

      Pues porque la plantilla comprada tendrá un montón de dependencias... complicado.

  • @EduardoCardosoMartin
    @EduardoCardosoMartin 3 года назад +1

    Ese tema del Terminal cual es?

    • @midudev
      @midudev  3 года назад +3

      Como Terminal uso iterm2.
      Como Unix Shell uso ohMyZsh.
      Como Prompt uso powerlevel10k.

  • @juandiegoacosta1
    @juandiegoacosta1 3 года назад +1

    1:30:00

  • @mariocarlosrocapenafiel8749
    @mariocarlosrocapenafiel8749 3 года назад +1

    275 likes

    • @midudev
      @midudev  3 года назад +2

      jajajaja Gracias por recordarlo. Lo haremos, lo haremos!!! 🚀

  • @fernandovillaquiran6673
    @fernandovillaquiran6673 2 года назад +1

    En qué categoría queda Vite?

    • @midudev
      @midudev  2 года назад +3

      Vite utiliza esbuild por debajo. Es un envoltorio, vaya.

    • @fernandovillaquiran6673
      @fernandovillaquiran6673 2 года назад

      @@midudev y rollup?? podrias explicar por favor y de antemano gracias

  • @ia.mtzrmz
    @ia.mtzrmz 2 года назад +1

    Es mas rapido que vite?

    • @midudev
      @midudev  2 года назад +2

      Vite usa esto por debajo 😄

    • @ia.mtzrmz
      @ia.mtzrmz 2 года назад

      @@midudev tiene sentido 🫣

  • @chemedev
    @chemedev 3 года назад +3

    "Si este video llega a 200 likes..." => instalike!

    • @midudev
      @midudev  3 года назад +1

      jajajaja tengo que hacerlo más a menudo para que os animéis a darle al botón de Like!!!! 👍