Obtén el código

Existen varias formas de obtener el código de Blockly y varias formas de cargarlo una vez que lo tengas.

Secuencia de comandos de creación de paquetes

Blockly proporciona una secuencia de comandos que inicia una aplicación de partida, que luego puedes modificar. Usa herramientas comunes de desarrollo web, como webpack y eslint, pero no incluye un framework, como React o Angular.

Para ello, debes instalar node.js y npm antes de ejecutar los siguientes comandos.

Para crear una aplicación escrita en JavaScript en un directorio hello-world nuevo, sigue estos pasos:

npx @blockly/create-package app hello-world

Para crear una aplicación escrita en TypeScript en un directorio hello-world nuevo, sigue estos pasos:

npx @blockly/create-package app hello-world --typescript

Estos crean un paquete que importa destinos de paquetes. También usa un archivo package.json para administrar las dependencias, lo que facilita mantenerse al día con la versión más reciente de Blockly.

También incluye algunas secuencias de comandos de partida útiles, como una para probar el proyecto localmente en un navegador:

cd hello-world
npm run start

Puedes consultar el archivo package.json generado para ver otros comandos.

Unpkg

Si solo estás jugando con ideas y no quieres iniciar una aplicación completa, puedes cargar Blockly desde unpkg con etiquetas de secuencia de comandos.

Si agregas lo siguiente a cualquier página HTML, puedes abrir el archivo HTML directamente en un navegador para experimentar con Blockly:

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

Esta no es una buena solución a largo plazo para adquirir Blockly, ya que no funciona con empaquetadores como webpack, pero es buena para el prototipado y la experimentación.

Obtén el código

Existen varias formas de hacer que el código ejecute Blockly.

El equipo de Blockly recomienda usar Blockly a través de un administrador de paquetes (como NPM o Yarn) por los siguientes motivos:

• Es más fácil mantenerse al tanto de los cambios en Blockly
• Se recomienda usar complementos en lugar de modificar Blockly.

NPM

npm install blockly --save

Lana

yarn add blockly

GitHub

También puedes descargar el código comprimido de nuestras versiones de GitHub. Sin embargo, esto requiere que descargues el código manualmente en intervalos regulares para recibir las actualizaciones y correcciones más recientes de Blockly.

Advertencia: Las descargas de GitHub solo se proporcionan para brindar comodidad a los desarrolladores que anteriormente bifurcaban Blockly. Si eres un desarrollador nuevo, debes usar un administrador de paquetes.

Carga el código

Una vez que hayas recibido el código, existen varias formas de acceder a él desde tu código.

Etiquetas de secuencia de comandos

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

Cuando usas etiquetas de secuencia de comandos, puedes acceder a las importaciones desde el espacio de nombres global:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

Nota: Cuando usas etiquetas de secuencia de comandos, no puedes tener varios archivos de mensajes, ya que los mensajes se aplican directamente al array Blockly.Msg.

Importaciones

Nota: Para usar importaciones de nuestros destinos de paquetes, debes usar un empaquetador (como webpack), ya que Blockly se empaqueta como un UMD, en lugar de un ESM.

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

Cuando importas los archivos de mensajes, también debes aplicarlos.

Blockly.setLocale(En);

Requiere

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

Cuando necesites los archivos de mensajes, también deberás aplicarlos.

Blockly.setLocale(En);