Depuración con Blockly y Blockly

En ocasiones, cuando desarrolles un complemento en muestras de bloques, deberás realizar los cambios correspondientes en Blockly. La mayoría de los complementos están configurados para recuperar Blockly desde el registro de npm, por lo que solo podrás usar el código que ya se lanzó en npm. Esto haría que depurar tus cambios en Blockly fuera difícil. Cuando desees realizar y probar cambios en las muestras tanto en bloques como en bloques, puedes usar cualquiera de los siguientes métodos para usar los cambios no publicados en conjunto.

Método 1: Vínculo de npm

Puedes indicarle a npm que use un paquete de tu máquina en lugar de recuperarlo desde el registro de npm. Con este método, deberías tener acceso a mapas de origen que facilitan la depuración de blockly_compress. Puedes usar este método con cambios en el núcleo que aún no se enviaron a GitHub.

1. En la bifurcación de Blockly:

   $ npm run package
   $ cd dist
   $ npm link
   

   Con estos pasos, se compila el núcleo de Blockly, se empaqueta y se crea un symlink a los archivos empaquetados.

2. En la bifurcación de Blockly-samples:

   $ npm link blockly
   

   En este paso, se le indica a npm que busque el symlink que creaste antes en lugar de recuperar el paquete desde npm.

3. npm run start para probar tu complemento.

Cuando realices cambios en la versión principal, deberás volver a compilarla y empaquetarla.

Método 2: Recuperar desde GitHub

Puedes indicarle a npm que recupere un paquete desde GitHub en lugar de hacerlo desde el registro de npm. Con este método, deberías tener acceso a mapas de origen que facilitan la depuración de blockly_compress. Deberás usar una versión de Blockly que ya esté publicada en algún lugar de GitHub.

1. Asegúrate de que la sección scripts en package.json para tu complemento incluya lo siguiente:

   "postinstall": "blockly-scripts postinstall"
   

   Esta secuencia de comandos compilará Blockly automáticamente después de que se instale desde GitHub en un paso posterior.

2. En lugar de proporcionar un número de versión para Blockly en package.json, proporciona una dirección de Git y un nombre de rama:

   "blockly": "git://github.com/google/blockly.git#develop"
   

   Esto también puede ser un vínculo a tu propia bifurcación de Blockly si tienes cambios sin combinar.

3. npm install habitual

4. npm run start para probar el complemento

Cuando realices cambios en el núcleo de Blockly, deberás enviarlos a GitHub en la rama especificada. Además, cuando quieras que npm recupere una versión nueva desde GitHub, deberás npm uninstall blockly (o quitarla de tu node_modules) y, luego, reinstalarla como se describió anteriormente.

Método 3: Playground avanzado

Puedes usar la zona de pruebas avanzada (en el núcleo de Blockly) para depurar tu complemento. Con este método, usarás blockly_uncompressed, que puede ser más fácil de depurar, ya que no dependerás de mapas de origen. Usa este método si tienes problemas para realizar la depuración con mapas de origen o si deseas probar tu complemento con las funciones de la zona de pruebas avanzada.

1. En el directorio del complemento, en blockly-samples:

   $ npm run build
   $ cd dist
   $ pwd
   

   Esto compila y empaqueta tu complemento. Luego, imprime la ruta de acceso completa del directorio dist de tu complemento. Copia esta ruta de acceso; la necesitaremos en el próximo paso.

2. En Blockly, en advanced_playground.html:

   <script src="$PATH_TO_DIST_DIR/index.js">
   

   Luego, también debes realizar la configuración requerida para el complemento. Por ejemplo, es posible que debas especificar ciertos valores en el objeto de opciones. Realiza esta configuración en la configuración del lugar de trabajo existente.

3. Abre la zona de pruebas avanzada en el navegador para probar tu complemento.

Cuando realices cambios en Blockly, solo deberás actualizar la página. Cuando realices cambios en tu complemento, deberás volver a ejecutar npm run build.