Obtén el código

Hay varias formas de obtener el código de Blockly y varias formas de cargarlo una vez que lo hayas obtenido.

Secuencia de comandos de Create-package

Blockly proporciona una secuencia de comandos que inicializa una aplicación de inicio, que luego puedes modificar. Utiliza 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, haz lo siguiente:

npx @blockly/create-package app hello-world

Para crear una aplicación escrita en TypeScript en un directorio hello-world nuevo, haz lo siguiente:

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

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

También incluye algunos scripts de inicio útiles, como uno para probar el proyecto de forma local 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 probando 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 código 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 bundlers como webpack, pero es buena para la creación de prototipos y la experimentación.

Obtén el código

Existen varias formas de obtener el código para ejecutar Blockly.

El equipo de Blockly recomienda requerir 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.
• Fomenta el uso de complementos en lugar de aplicar parches a 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 a intervalos regulares para recibir las actualizaciones y correcciones más recientes de Blockly.

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

Carga el código

Una vez que obtengas el código, hay 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 porque los mensajes se aplican directamente al array Blockly.Msg.

Importaciones

Nota: Para usar las importaciones de nuestros destinos de paquetes, debes usar un bundler (como webpack), ya que Blockly se empaqueta como UMD, en lugar de 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 importes los archivos de mensajes, también deberás aplicarlos.

Blockly.setLocale(En);

Requisitos

// 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);