Dirección de video original: herramientas frontend de próxima generación con ViteJS ✨ Open Source Friday ✨ [1]
Dirección de video de subtítulos en chino e inglés (Estación B): [Traducción] Herramienta de interfaz de usuario de próxima generación ViteJS Subtítulos bilingües en chino e inglés-Open Source Friday [2]
Dirección de video de subtítulos en chino e inglés (Tencent Video): [Traducción] Herramienta de interfaz de usuario de próxima generación ViteJS Subtítulos bilingües en chino e inglés-Open Source Friday [3]
Subtítulos en inglés: traducción de escucha, subtítulos automáticos de YouTube
Revisión y traducción al inglés: Ivocin [4]
Respecto a Vite , veamos qué dijo el propio autor. Este video es un video en vivo del autor de Vue [5] y Vite [6] You Yuxi [7] en Twitch [8] como invitado en GitHub Open Source Friday [9] el 12 de febrero de 2021 . En el video, la explicación detallada de Youda de las diversas funciones de Vite, la codificación en línea de Dashen, la depuración en línea, el paquete web Dalu diss y el pensamiento filosófico en Vite. Este video es muy largo, casi 70 minutos, el siguiente es un extracto del video, puede elegir el punto de interés para enviarlo usted mismo. Se recomienda encarecidamente que veas el video, hay muchos detalles en él, creo que lo ganarás. Dirección de video: [Traducción] Herramienta de interfaz de usuario de próxima generación ViteJS subtítulos bilingües en chino e inglés-Open Source Friday [10]
Problema de pronunciación de Vite
Video Transmission-1: 18 [11] Tortura del alma sobre la pronunciación de Vite: Dado que Vite usa su pronunciación francesa, ¿por qué Vue no usa su pronunciación francesa? (Probablemente porque la pronunciación francesa no es buena). Youda nos dijo que el autor dijo cómo leerlo y luego lo leyó.
Personalmente, creo que los documentos de Vue y Vite son concienzudos. Primero, explicaré la pronunciación de mi nombre, para que los desarrolladores de todo el mundo puedan reconocerlo. Echemos un vistazo a Svelte [12] de nuevo , por no hablar de la pronunciación, todavía no recuerdo la ortografía.
Que es Vite
Video Transmission-2: 33 [13]
El propio You Da dijo que es difícil describir exactamente qué es Vite en una oración. La razón principal puede ser que se compone principalmente de dos partes, un servidor de desarrollo basado en ESM [14] usando esbuild [15] , y la otra parte es un empaquetador configurable basado en Rollup [16] . Por supuesto, hay muchas otras funciones poderosas, pero es más que una oración. You Da dijo que el producto más cercano en el mercado a Vite es Parcel [17] , pero los principios de implementación de los dos son completamente diferentes.
¿Por qué aparece Vite en este momento?
Video Delivery-4: 53 [18] La
razón esencial debería ser que la mayoría de los navegadores modernos (excepto IE 11) ya admiten muy bien los módulos ES nativos, y la nueva versión de Node también es compatible con ESM. ESM finalmente puede dominar el mundo en un futuro próximo. El original es incienso.
Iniciar demostración
Entrega de video-7 : 05 [19] Sin usar @ vitejs / create-app, cree una demostración del proyecto Vite desde 0.
El archivo de entrada es index.html
Entrega de video: 14:25 [20]
Vite tiene opiniones
Entrega de video- 17: 08 [21] Para
enfocarse, Vite tiene Opinión , y este contenido se ha mostrado muchas veces en el video. De hecho, opinado fue originalmente un término despectivo, que significa obstinado, pero cuando se usa en el campo de la informática, se ha convertido en un término absolutamente elogioso. La herramienta que dice ser obstinada garantiza la facilidad de uso a través de convenciones, y también proporciona configuración para asegúrese de que no perderá flexibilidad. Vite incorpora una gran cantidad de convenciones de mejores prácticas, lo que elimina la tediosa configuración y asegura que las funciones comúnmente utilizadas por los desarrolladores de aplicaciones para el usuario estén disponibles de forma inmediata. Opinión sobre un PR de traducción puede referirse al programa de traducción Nuggets [22] , un PR Vite documentos chinos [23] estas dos discusiones. Entonces la pregunta es, son algunos software obstinados y sin opiniones . Permítanme ir primero: Opinionated tiene Vite [24] , Prettier [25] , Unpinionated como webpack [26] . Por supuesto, no opinado no es una buena palabra. Nadie debería escribir que no está pinchado en documentos oficiales. Este párrafo trata sobre el paquete web, mira cómo los grandes disuelven el paquete web:
¿Vue CLI migrará a Vite?
Entrega de video- 23 : 56 [27] No por el momento, todavía se basa en el paquete web, pero definitivamente se migrará a Vite al final.
Vite es un marco agnóstico
Video Delivery- 25:43 [28]
Vite proporciona una API de JavaScript muy bien definida que se puede utilizar a un nivel superior, como VitePress [29] , que es el hermano gemelo de VuePress [30] y se basa en Vite.
Tailwind CSS + Vite combate
Transmisión de video-27: 07 [31] Youda escribe el código Tailwind en línea y se da vuelta. 
El anfitrión se burló de que Evan You también necesita depurar.
Vite + React en acción
Transmisión de video-35: 30 [32] El anfitrión bromeó , ¡vimos a You Yuxi escribir React en línea!
Acerca de Esbuild: "Quickly" es solo una palabra
Video Delivery-38: 24 [33]
Esbuild es la razón por la que Vite es tan rápido, es 20-30 veces más rápido que el tsc tradicional. Vite usa esbuild en lugar de Rollup para el preenvasado, que también es muy rápido. Aquí Yuda reveló su computadora de trabajo, la Mac Book Pro basada en ARM equipada con el chip M1 . Desafortunadamente, esbuild en ese momento no era compatible con la arquitectura ARM, pero la última versión de Go ya la admite. Inesperadamente, unos días después, esbuild lanzó su versión compatible con el chip M1. Youda lo probó en primer lugar:
Que es DX
Transmisión de video-47: 36 [34] Durante el proceso de traducción de video, escuché a You Da decir la palabra DX. No sabía lo que significaba, así que la escuché muchas veces. Más tarde, Google descubrió que DX se desarrolló originalmente por Developer Experience. Es decir, parece que hay un término oficial para cuidar de los desarrolladores. Para obtener una explicación de DX, consulte ¿Qué es DX \? \ (Developer Experience \) [35] . 
Vite utiliza sus funciones rápidas para mejorar en gran medida la experiencia del desarrollador. Para decirlo sin rodeos, es como un niño mimado. Es difícil para él soportar el proyecto durante más de 1 segundo.
Sobre SSR
Video Transmission-52: 20 [36] SSR aún se encuentra en la etapa experimental; consulte el documento oficial del sitio web [37] para obtener más detalles .
Sobre HMR
Video Delivery-57: 59 [38] Vite realmente resuelve el problema de la velocidad HMR y cada vez es más lento a medida que la aplicación se vuelve más y más grande.
¿Por qué no usar esbuild en modo de producción, no es más rápido?
Video Delivery-65: 31 [39] En realidad quiero usarlo, pero esbuild no es lo suficientemente robusto para soportar paquetes de producción, y muchas configuraciones no se pueden lograr a través de esbuild. Por ahora, Rollup es una buena opción, aunque es mucho más lento que esbuild. Además, puede usar esbuild como un compresor en lugar de terser. Vea build.minify [40] para más detalles . Esto será más rápido, pero el volumen del paquete puede aumentar entre un 5% y un 10%, dependiendo de la elección del usuario.
posdata
Ha pasado mucho tiempo desde que hice una traducción de video a gran escala. La última vez fue la traducción de React Conf 2018 [41] . La traducción de este video comenzó el 15 de febrero durante las vacaciones del Festival de Primavera. Hubo relativamente poco tiempo después del inicio de la construcción, y tomó más de tres semanas de forma intermitente. Afortunadamente, GitHub subió el video a YouTube después de que expiró el video de Twitch. Usando su función de subtítulos automáticos, ahorró mucho tiempo después. De hecho, la función de voz a texto de YouTube es más poderosa. Si encuentra algún problema con los subtítulos, deje un mensaje en el área de comentarios del video. Espero que este video pueda ayudar a todos.
Autor: Kiyoaki
enlace: https: //juejin.cn/post/6937176680251424775
Fuente: Nuggets
derechos de autor reservados por los autores. Para reimpresiones comerciales, comuníquese con el autor para obtener autorización, y para reimpresiones no comerciales, indique la fuente.
Referencia
[1]
Herramientas frontend de próxima generación con ViteJS ✨ Open Source Friday ✨: https://www.youtube.com/watch?v=UJypSr8IhKY
[2][Traducción] La herramienta de interfaz de usuario de próxima generación ViteJS subtítulos bilingües en chino e inglés - Código abierto viernes: https://www.bilibili.com/video/BV1kh411Q7WN
[3][Traducción] La herramienta de interfaz de usuario de próxima generación ViteJS subtítulos bilingües en chino e inglés-Open Source Friday: https://v.qq.com/x/page/z3232ldhxho.html
[4]Ivocin: https://github.com/Ivocin
[5]Ver: https://v3.vuejs.org/
[6]Rápido: https://vitejs.dev/
[7]Tú Yuxi: https://github.com/yyx990803
[8]Contracción: https://www.twitch.tv/
[9]Viernes de código abierto de GitHub: https://www.youtube.com/watch?v=qXHiXSSD3Kc&list=PL0lo9MOBetEFmtstItnKlhJJVmMghxc0P
[10][Traducción] La herramienta de interfaz de usuario de próxima generación ViteJS subtítulos bilingües en chino e inglés - Código abierto viernes: https://www.bilibili.com/video/BV1kh411Q7WN
[11]Transmisión de video-1: 18: https://www.bilibili.com/video/BV1kh411Q7WN?t=1m18s
[12]Svelte: https://svelte.dev/
[13]Transmisión de video-2: 33: https://www.bilibili.com/video/BV1kh411Q7WN?t=2m33s
[14]ESM: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[15]esbuild: https://esbuild.github.io/
[dieciséis]Resumen: http://rollupjs.org/guide/en/
[17]Paquete: https://parceljs.org/
[18]Transmisión de video-4: 53: https://www.bilibili.com/video/BV1kh411Q7WN?t=4m53s
[19]Entrega de video-7: 05: https://www.bilibili.com/video/BV1kh411Q7WN?t=7m5s
[20]Entrega de video-14: 25: https://www.bilibili.com/video/BV1kh411Q7WN?t=14m25s
[21]Transmisión de video-17: 08: https://www.bilibili.com/video/BV1kh411Q7WN?t=17m8s
[22]RP del Proyecto de traducción de Nuggets: https://github.com/xitu/gold-miner/pull/7984#issuecomment-782794534
[23]Un RP de documentos chinos de Vite: https://github.com/vitejs/docs-cn/pull/17#discussion_r578294432
[24]Rápido: https://vitejs.dev/
[25]Más bonita: https://prettier.io/
[26]paquete web: https://webpack.js.org/
[27]Transmisión de video-23: 56: https://www.bilibili.com/video/BV1kh411Q7WN?t=23m56s
[28]Transmisión de video-25: 43: https://www.bilibili.com/video/BV1kh411Q7WN?t=25m43s
[29]VitePress: https://vitepress.vuejs.org/
[30]VuePress: https://vuepress.vuejs.org/
[31]Transmisión de video-27: 07: https://www.bilibili.com/video/BV1kh411Q7WN?t=27m7s
[32]Transmisión de video-35: 30: https://www.bilibili.com/video/BV1kh411Q7WN?t=35m30s
[33]Transmisión de video-38: 24: https://www.bilibili.com/video/BV1kh411Q7WN?t=38m24s
[34]Transmisión de video-47: 36: https://www.bilibili.com/video/BV1kh411Q7WN?t=47m36s
[35]¿Qué es DX? (Experiencia de desarrollador): https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9
[36]Transmisión de video-52: 20: https://www.bilibili.com/video/BV1kh411Q7WN?t=52m20s
[37]Documento del sitio web oficial: https://vitejs.dev/guide/ssr.html
[38]Transmisión de video -57: 59: https://www.bilibili.com/video/BV1kh411Q7WN?t=57m59s
[39]Transmisión de video-65: 31: https://www.bilibili.com/video/BV1kh411Q7WN?t=65m31s
[40]build.minify: https://vitejs.dev/config/#build-minify
[41]Traducción de React Conf 2018: https://juejin.cn/post/6844903726684061710