Obtener Blockly

Hay varias formas de obtener el código de Blockly y de cargarlo una vez que la recibas.

Secuencia de comandos Create-package

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

Esto requiere que instales node.js y npm antes de ejecutarlo. 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 destinos del paquete. También utiliza un package.json para administrar las dependencias, lo que facilita mantenerse actualizado con la última versión de Blockly.

También incluye algunos {i>scripts<i} útiles de inicio, como uno 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.

Sin empaquetar

Si solo estás jugando con ideas y no quieres arrancar una puedes cargar Blockly desde unpkg mediante etiquetas de secuencias de comandos.

Si agregas lo siguiente a una 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 funcionan con agrupadores como Webpack, pero son ideales para el prototipado y para realizar experimentos.

Obtén el código

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

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

• Es más fácil mantenerse al día con los cambios en Blockly
• Fomenta el uso de complementos en lugar de aplicar parches en Blockly.

NPM

npm install blockly --save

Yarn

yarn add blockly

GitHub

También puedes descargar el código comprimido desde nuestro Versiones de GitHub. Sin embargo, esto requiere que descarga el código a intervalos regulares para recibir las últimas actualizaciones y correcciones para Blockly.

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

Carga el código

Una vez que hayas obtenido 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 Los mensajes se aplican directamente al array Blockly.Msg.

Importaciones

Nota: Para usar importaciones de nuestros destinos de paquetes, debes usar un agrupador. (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 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 debes aplicarlos.

Blockly.setLocale(En);