Scarica Blockly

Esistono diversi modi per ottenere il codice Blockly e diversi modi per caricarlo una volta ottenuto.

Script per la creazione di un pacchetto

Blockly fornisce uno script che esegue il bootstrap di un'applicazione iniziale, che potrai modificare. Utilizza strumenti di sviluppo web comuni come webpack ed eslint, ma non include un framework come React o Angular.

Ciò richiede l'installazione di node.js e npm prima di eseguire i comandi seguenti.

Per creare un'applicazione scritta in JavaScript in una nuova directory hello-world:

npx @blockly/create-package app hello-world

Per creare un'applicazione scritta in TypeScript in una nuova directory hello-world:

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

In questo modo viene creato un pacchetto che importa i target del pacchetto. Utilizza inoltre un file package.json per gestire le dipendenze, in modo da rimanere facilmente aggiornato con l'ultima versione di Blockly.

Include anche alcuni pratici script di partenza, come quelli per testare il progetto in locale in un browser:

cd hello-world
npm run start

Puoi fare riferimento al file pacchetti.json generato per altri comandi.

Senza imballaggio

Se stai solo giocando con le idee e non vuoi eseguire il bootstrap di un'applicazione completa, puoi caricare Blockly da unpkg utilizzando i tag di script.

Se aggiungi quanto segue a una pagina HTML, puoi aprire il codice HTML direttamente in un browser per sperimentare 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>

Questa non è una buona soluzione a lungo termine per l'acquisizione di Blockly, perché non funziona con bundler come Webpack, ma è utile per la prototipazione e la sperimentazione.

Ottieni il codice

Esistono diversi modi per ottenere il codice per eseguire Blockly.

Il team di Blockly consiglia di richiedere Blockly tramite un gestore di pacchetti (ad esempio NPM o Yarn) perché:

• È più facile essere sempre al corrente delle modifiche apportate in Blockly
• Incoraggia l'utilizzo di plug-in anziché monkeypatching Blockly

Gestione dei partner di rete

npm install blockly --save

Filato

yarn add blockly

GitHub

Puoi anche scaricare il codice compresso dalle nostre release di GitHub. Tuttavia, questo richiede il download manuale del codice a intervalli regolari per ricevere gli ultimi aggiornamenti e correzioni per Blockly.

Avviso: i download da GitHub sono forniti solo per praticità solo per gli sviluppatori che in precedenza avevano effettuato il forking di Blockly. Se sei un nuovo sviluppatore, dovresti utilizzare un gestore di pacchetti.

Carica il codice

Una volta ricevuto il codice, esistono diversi modi per accedervi dal codice.

Tag script

<!-- 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>

Quando utilizzi i tag script, puoi accedere alle importazioni dallo spazio dei nomi globale:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

Nota: quando utilizzi i tag di script, non puoi avere più file di messaggi perché questi vengono applicati direttamente all'array Blockly.Msg.

Importazioni

Nota: per utilizzare le importazioni dei nostri target dei pacchetti, devi utilizzare un bundler (come webpack), poiché Blockly è pacchettizzato come UMD, anziché come 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';

Devi applicarli anche quando importi i file dei messaggi.

Blockly.setLocale(En);

Richiede

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

Quando hai bisogno dei file dei messaggi, devi anche applicarli.

Blockly.setLocale(En);