Secuencias de comandos de compilación de Blockly

Blockly se compone de más de cien archivos TypeScript. El compilador de TypeScript, tsc, debe compilarlos en JavaScript para que se puedan usar. Esto crea una cantidad igual de grande de archivos .js, que son adecuados para pruebas locales, pero cargar tantos archivos por Internet es una experiencia lenta para los usuarios finales. Para que Blockly se cargue más rápido, el Closure Compiler se usa para lo siguiente: comprimirlos (minificar) y combinarlos en media docena de archivos ("paquetes" o "fragmentos") con un tamaño total inferior a la mitad que el de los archivos sin comprimir.

En el proceso, se puede codificar con las funciones más recientes de ECMAScript, las cuales podrían no sean compatibles con todos los navegadores o se transpilan a ES6, que generalmente es compatible con los navegadores más utilizados. Por lo tanto, es es importante que publiques solo el código reducido para los usuarios finales.

El repositorio google/blockly contiene solo el código fuente. Anteriormente, también contenía los productos de compilación, pero desde 2019 los paquetes reducidos se han publicado como el blockly paquete de NPM y desde de 2022 también se adjunta como archivo .tgz a cada versión de GitHub, por lo que no es necesario para construir Blockly, a menos que hackeen en Blockly, sobre todo en en los directorios core, blocks, generators o msg.

El proceso de compilación, prueba y publicación de Blockly se automatiza usando secuencias de comandos de npm para ejecutar Gulp tareas de configuración. En esta página, se documentan las secuencias de comandos principales y lo que hace cada una.

Modo comprimido y sin comprimir

La carga de Blockly directamente desde los archivos .js individuales que genera el compilador de TypeScript se conoce como “modo sin comprimir”. Debido a que evita varios pasos de compilación lentos, esto facilita un ciclo rápido de edición, compilación y ejecución. También facilita la depuración, ya que el código JavaScript que se ejecuta es casi tan legible como las fuentes originales de TypeScript, lo que evita la necesidad de depender de los mapas de origen.

La carga en Blockly desde paquetes reducidos se denomina “modo comprimido”. Esta es la mejor manera de probar los cambios realizados en Blockly cuando se usa como dependencia. de otro paquete, ya que prueba (una versión no publicada) el blockly npm.

Nota: Hay algunos lugares en el repositorio de Blockly en los que los términos “modo no compilado” y “modo compilado” se usan como sinónimos de “modo no comprimido” y “modo comprimido”, respectivamente. Este uso tenía sentido en el pasado, ya que Closure Compiler se usaba para comprimir (reducir) el código, pero ahora siempre se necesita el compilador de TypeScript, incluso en el modo sin comprimir, por lo que esta terminología alternativa puede ser confusa y no se recomienda.

Inicio rápido

Si realizaste cambios locales y quieres asegurarte de que no hayan fallado o cualquier prueba, ejecuta
```
npm test
```
para compilar Blockly y ejecutar su paquete de pruebas.
Si quieres probar los cambios locales en el navegador, ejecuta lo siguiente:
```
npm start
```
Esto compila Blockly y abre un navegador web que apunta a Blockly zona de pruebas que ejecuta Blockly en modo sin comprimir.

Se modificarán todos los archivos en core/, blocks/ y generators/ volver a compilarse automáticamente; vuelve a cargar la pestaña del navegador para ver los cambios.
Para compilar tu versión de Blockly modificada localmente y probarla, en formato como una dependencia de otro paquete npm, ejecuta
```
npm run package
```
para compilar el paquete Blockly
```
cd dist && npm link
```
para indicarle a npm dónde encontrar los archivos compilados y, luego, cd a la carpeta antes de ejecutar
```
npm link blockly
```
para que tu paquete use la versión compilada recientemente de Blockly en lugar del paquete blockly publicado.

Referencia detallada de la secuencia de comandos

En esta sección, se enumera el principio scripts del archivo package.json de Blockly con una explicación de lo que hacen.

Estas secuencias de comandos generan archivos en dos lugares:

Los archivos del subdirectorio build/ son archivos intermedios que se usan para pruebas locales o que transfieren partes posteriores de la canalización de compilación.
Los archivos del subdirectorio dist/ forman el contenido del archivo npm publicado .

No se realiza un seguimiento de ninguno de los directorios en el repositorio de git de Blockly.

`clean`

npm run clean limpia cualquier compilación anterior borrando los objetos build/ y dist/ directorios. Es útil para corregir fallas de compilación esotéricas, en particular las que se producen cuando se cambia el nombre de un archivo fuente.

`messages`

npm run messages actualiza los archivos de mensajes en msg/json/ con los cambios que haya. que se realizaron en msg/messages.js y que deben ejecutarse cada vez se modifica ese archivo.

`langfiles`

npm run langfiles genera los archivos de lenguaje compilados en build/msg/. de los archivos de mensajes en msg/json.

`tsc`

npm run tsc ejecuta el compilador de TypeScript en el contenido de core/. Directorios blocks/ y generators/, y genera archivos .js individuales a build/src/.

`minify`

npm run minify ejecuta closure-make-deps y closure-calculate-chunks para determinar cómo dividir los archivos .js compilados en fragmentos (minificados paquetes), después de lo cual ejecuta closure-compiler para crear los fragmentos como sigue:

El contenido de build/src/core/ se convierte en dist/blockly_compressed.js.
El contenido de build/src/blocks/ se convierte en dist/blocs_compressed.js.
El contenido de build/src/generators/javascript/ (más build/src/generators/javascript.js) se convierten en dist/javascript_compressed.js.
Y del mismo modo para dart, lua, php y python.

Los fragmentos generados usan un wrapper para garantizar la compatibilidad con el grupo definición del módulo para que no se necesite necesarios antes de que se incluyan en el paquete.

`build`

npm run build ejecuta las tareas minify y langfiles. Esto debería tener todo lo necesario para cargar Blockly Playground o sin comprimir.

`package`

npm run package ejecuta las tareas clean y build y, luego, ejecuta lo siguiente:

Aplica un wrapper UMD a los archivos en build/msg/ y coloca las versiones empaquetadas en dist/msg/.
Agrega varios archivos de compatibilidad adicionales a dist/, con wrappers de UMD cuando corresponda.

`publish`

El equipo de Blockly usa npm run publish para publicar el archivo npm de blockly . Depende de la infraestructura interna de Google, por lo que no es útil. a desarrolladores externos.

`lint`

npm run lint ejecuta ESLint, que realiza un análisis estático del código fuente de Blockly para encontrar problemas.

`test`

npm test (o npm run test) ejecuta la tarea package y, luego, ejecuta varias pruebas automatizadas (incluida la ejecución de ESLint). Esto se debe ejecutar, y pasar, cualquier código enviado como solicitud de extracción al repositorio en bloque.