Dachang Technology Advanced Front-end Nodo Avanzado
Haga clic en la guía de crecimiento del programador superior, preste atención al número público
Respuesta 1, únete al grupo de intercambio de nodos avanzado
Autor: Mouse Jun QAQ
Texto original: https://juejin.cn/post/7064864648729722887
¡Hola, todos! ! , Mucho tiempo sin verte, ¿estás feliz por el Año Nuevo? El autor aquí primero les desea a todos un feliz año nuevo, y les deseo a todos una feliz vejez QAQ. Después de este año, descubrí que se lanzó oficialmente la última versión de la documentación oficial de Vue [1] ¿Habéis estado todos allí para verla? Además de la nueva interfaz y el tema oscuro, lo más destacado es este Vue Playground [2] , que proporciona un entorno de edición interactivo en línea para depurar directamente el código de caso proporcionado por el documento en línea, y es muy liviano.
¿Qué es REPL (Intérprete Interactivo)?
REPL (Read Eval Print Loop: Interactive Interpreter) representa un entorno en el que podemos ingresar comandos o código y recibir respuestas del intérprete. Hay cuatro características principales.
Lectura : lea la entrada del usuario, analice la estructura de datos de entrada y almacene en la memoria.
Ejecutar Eval - Ejecutar la estructura de datos de entrada
Imprimir Imprimir - mostrar el resultado
Bucle Bucle : repita los pasos anteriores hasta que el usuario salga.
Es decir, todos los editores de código que usamos ahora son en realidad un REPL (intérprete interactivo)
¿Qué es un REPL en línea (intérprete interactivo)?
La mayoría de los editores de código que usamos a diario se descargan e instalan localmente a través de paquetes de software, ya que se puede obtener una experiencia de compilación e interacción mejor y más fluida en el entorno del sistema local. Sin embargo, en algunos escenarios, el intérprete interactivo de la versión web es más ventajoso, como
Tengo un fragmento de código que quiero compartir con otros, obviamente es más conveniente pasar la URL de la página web que transmitir el paquete de código.
Escribí un componente que debe tener una dirección de vista previa o un enlace de vista previa de iframe incrustado en mi documento
Quiero reproducir un error en el entorno más simple, pero creo que es demasiado problemático volver a abrir un proyecto. Quiero tener una página web y puedo escribir código directamente cuando la abro. Es mejor que mi las dependencias de uso común están integradas en él.
Puede descargar el código editado en línea y ejecutarlo localmente
Coincidentemente, el Vue Playground de los escenarios anteriores se resuelve mejor
Problemas existentes
Aunque Vue's Playground tiene todas las características de un intérprete interactivo en línea, solo preestablece el entorno de ejecución de Vue. Supongamos que quiero preestablecer más módulos. Por ejemplo, quiero que admita naturalmente lodash, la biblioteca de componentes y varias funciones de herramientas A, ¿Qué tengo que hacer?
El propio autor es una biblioteca de componentes de código abierto, y la tarea ha sido escrita. Los estudiantes que estén interesados en copiar la tarea y no estén interesados en ver la implementación pueden leerla directamente. En teoría, también puede copiar fácilmente un editor en línea de su dispositivo propio
Zona de juegos de interfaz de usuario Varlet [3]
Fuente [4]
cómo
El primer Vue Playgroundcódigo fuente abierto se puede encontrar que el núcleo de todo el intérprete interactivo está en @vue/replesta dependencia, y Vue Playgroundsolo está @vue/replintegrado.
Podemos ver que @vue/replel ciclo de vida de Youda se ha resumido en uno classe incluido en él @vue/repl. Veamos su implementación específica. Solo necesitamos implementar esto de acuerdo con la calabaza y dibujar una cucharada class, y agregar nuestro código preestablecido. Eso es todo, Si está interesado, puede echar un vistazo a las modificaciones antes y después que se proporcionan a continuación y compararlas.
Código fuente de Vue Playground [5]
La clase proporcionada por \@vue/repl antes de la modificación [6]
Clase modificada [7]
inyectar lista de dependencias
Como se muestra en la figura a continuación, solo @vue/replestá classpreestablecido vue. Si necesita preestablecer más módulos de terceros, puede inyectarlos aquí (combinar objetos). Es importante tener en cuenta que debido a que todo el intérprete se basa en Vite, el módulo de terceros dependiente debe ser un esmmódulo.
La lista de inyección de versión del autor se ve así. keyEs un alias de módulo, valuees un módulo cdn地址, porque el autor colocó directamente las dependencias en el publicdirectorio y las empaquetó juntas, por lo que se usa una ruta relativa.
{
'@varlet/ui': './varlet.esm.js',
'@varlet/touch-emulator': './varlet-touch-emulator.js'
}
复制代码Inyectar archivo preestablecido
Después de determinar las dependencias, puede agregar archivos y códigos preestablecidos. Los archivos preestablecidos se almacenan en state.filesy podemos enviar los archivos que necesitamos agregar.
El autor agregó esto
Luego...
Luego, normalmente puede acceder a los archivos preestablecidos en el intérprete. El artículo es solo para facilitar que todos comprendan los puntos clave. Se recomienda que lea el código fuente. El código fuente es muy corto. El autor tardó más de una hora. para copiar el estuche oficial de Vue y conectarse a Internet, pero los beneficios son realmente enormes.
El autor también recomienda construir una plataforma de edición en línea de este tipo dentro de la empresa, integrando algunos módulos de uso común para hacer algunos comentarios sobre errores, compartir código y escribir algunos borradores.
finalmente
El equipo del autor está manteniendo activamente nuestro proyecto de código abierto Varlet. Es una Vue3 biblioteca de componentes móviles de estilo Material basada en el desarrollo, Varlet UI Playgroundque también se lanzó oficialmente. Puede usarla para enviarnos comentarios sobre errores o para jugar con nuestra biblioteca de componentes. Una forma rápida ( después de todo, muchas personas son demasiado perezosas para instalar dependencias ), y también agradecer a la comunidad por su apoyo y ayuda. Haremos esfuerzos persistentes en el nuevo año.
Si nos apoya o cree que lo estamos haciendo bien, a continuación encontrará la dirección de nuestro almacén, ayúdenos con un pedido pequeño star. El apoyo de nuestros compañeros de clase es la fuerza motriz de nuestro código abierto.
dirección del almacén de Github [8] dirección del documento [9]
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持❤️