Obtener Blockly

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

Secuencia de comandos de creación de paquete

Blockly proporciona una secuencia de comandos que arranca 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.

Es necesario que instales 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

Estas crean un paquete que importa objetivos de paquetes. También usa un archivo package.json para administrar 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 inicio útiles, como una para probar el proyecto de forma local en un navegador:

cd hello-world
npm run start

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

No empaquetado

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 agrupadores como Webpack, pero es útil para el prototipado y la experimentación.

Obtén el código

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

El equipo de Blockly recomienda solicitar Blockly mediante 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 aplicarles parches a Blockly.

NPM

npm install blockly --save

Yarn

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 de forma manual en intervalos regulares para recibir las actualizaciones y correcciones más recientes en Blockly.

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

Carga el código

Una vez que obtienes el código, hay varias formas de acceder a él desde él.

Etiquetas de secuencias 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 estos se aplican directamente al array Blockly.Msg.

Importaciones

Nota: Para usar importaciones de nuestros destinos de paquetes, debes utilizar un agrupador (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 mensaje, también deberás aplicarlos.

Blockly.setLocale(En);