angular - flujo de trabajo del transpilador de JavaScript/TypeScript

Mi flujo de trabajo con JS/HTML siempre ha sido

1. escribir código
2. recargar sitio web
3. arreglar errores/ajustar el código
4. ir a 2

Todos mis proyectos todavía están en AngularJS 1.x, y me temo que tengo que pasar al flujo de trabajo de transpilación de TypeScript-cli.

Realmente no lo entiendo. Siempre vi un beneficio inmenso en poder simplemente presionar F5 y luego ver el resultado del código JavaScript.

No entiendo cómo puedo seguir utilizando ese flujo de trabajo basado en F5 cuando hay un compilador que necesita ser invocado antes de cada recarga de página.

¿Me estoy perdiendo de algo? ¿Cómo se supone que debe ser el flujo de trabajo?

Esto no está necesariamente enfocado en Angular 2+, ya que otros frameworks también parecen querer ser compilados.

Alrededor del 90% de mi programación en JavaScript ocurre dentro de un editor que tiene un excelente soporte SFTP, así que me conecto por SFTP a la máquina de desarrollo y edito el HTML/JS en vivo en este servidor de desarrollo. Tengo al menos tres docenas de servidores de software en unas tres máquinas, todos con una estructura de directorios muy limpia por proyecto/servidor, así que solo tengo que seleccionar el directorio en el editor y comenzar a editar los archivos, y recargarlos en el navegador.

Cambiar a CLI necesitaría que el servidor CLI se adaptara a la estructura de directorios existente, que el servidor CLI se ejecute junto con el servidor que realmente hospeda los archivos HTML/JS. Luego, de alguna manera, necesita compilar los archivos modificados y colocarlos en el directorio donde normalmente simplemente voy y edito el archivo.

Mi estructura usualmente es la siguiente

/project1/data/log.txt
               uploaded.jpg
         /python/server.py
                /server_handler_1.py (auto-reloads)
                /server_handler_2.py (auto-reloads)
                /html/page1.html
                      page2.html
                /scripts/script1.js
                         script2.js
                /static/image1.png
                        image2.png

Luego, cuando todo está hecho, lo envío mediante rsync al servidor de destino.

Muy rara vez programo proyectos web en la máquina local. No uso IDEs ni editores de texto "modernos", principalmente debido a su falta de buen soporte SFTP, pero también por su rendimiento.

Respuesta #1

Puedes continuar con el mismo flujo de trabajo. El compilador de TypeScript (o, si estás usando Angular, el compilador de Angular -- que utiliza el compilador de TypeScript internamente) tiene un modo 'watch', por lo que compila los archivos de TypeScript a medida que los guardas, lo que significa que puedes presionar F5 y ver tus cambios.

De hecho, si estás usando el Angular CLI, este actualiza automáticamente la página web cuando guardas un archivo y compila el resultado, así que ni siquiera tienes que presionar F5 en absoluto.

Y si no usas Angular, puedes iniciar el compilador de TypeScript en modo watch, y compilará cada archivo TypeScript a medida que lo guardes:

tsc -w

Así que si esas son tus preocupaciones, puedes olvidarlas y, en su lugar, pensar en todos los beneficios de un lenguaje tipado.

Respuesta #2

Si eres como yo, no obtienes ninguna alegría en aprender cómo configurar un proyecto hoy en día, pero la buena noticia es que el flujo de trabajo, una vez configurado correctamente, nunca ha sido mejor.

En comparación con tu flujo de trabajo original, puedes superponer de la siguiente manera:

Compilar en modo observación

Usa la opción de compilador --watch de TypeScript:

tsc --watch

Cada vez que se cambie un archivo fuente *.ts, se recompilarán de manera incremental los archivos de salida *.js. Ahora puedes editar el código y actualizar la ventana de tu navegador para ver los cambios, tal como antes.

Usa un IDE que compile al guardar

Muchos IDEs con soporte para TypeScript, como Visual Studio Code y Atom, pueden compilar TypeScript a JavaScript cada vez que editas un archivo. Nuevamente, ahora simplemente puedes editar el código y refrescar el navegador como lo hacías antes, sin siquiera necesitar usar la línea de comandos.

Usar Webpack

Webpack es un empaquetador de JavaScript. Al principio puede resultar bastante intimidante, pero es potente, flexible y actualmente un estándar de la industria. Puedes pensar en él como una herramienta de construcción altamente configurable para el desarrollo en el navegador. Tienen una guía para configurar TypeScript. Una vez que hayas configurado webpack para manejar TypeScript (usando ts-loader), puedes ejecutar el webpack-dev-server. Ahora los cambios en el código no solo recompilarán TypeScript de manera incremental al guardar (en memoria, no en el sistema de archivos), sino que también recargarán la ventana del navegador en vivo por ti. Webpack tiene muchos trucos, por lo que la configuración inicial vale mucho la pena.

(Angular) Usa angular-cli

Para proyectos de Angular, proporcionan el angular-cli, una herramienta construida sobre Webpack que hace que la configuración inicial y el flujo de trabajo de desarrollo sean aún más simples.

(React) Usar react-create-app

De manera similar, para los proyectos de React han creado create-react-app, una herramienta para empezar a trabajar sin mucha configuración. Tiene muchas opciones que simplifican la configuración, por ejemplo, puedes añadir fácilmente Flow, un sistema de tipos estático similar a TypeScript que funciona muy bien con React, o puedes usar create-react-app-typescript, que es un fork del proyecto que habilita TypeScript (que también funciona muy bien con React).

Conclusión

Sé de dónde vienes, yo también recuerdo los días sencillos del desarrollo web, pero espero haberte convencido de que hoy en día existen algunas herramientas excelentes para permitir flujos de trabajo realmente buenos, ¡incluso mejores que antes! Este post en realidad solo rasca la superficie.