Scarica Blockly

Esistono diversi modi per ottenere il codice Blockly e per caricarlo una volta che l'avrai ricevuta.

Crea script pacchetto

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

È quindi necessario installare node.js e npm prima di eseguire i seguenti comandi.

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

Queste creano quindi un pacchetto che importa i target dei pacchetti. Utilizza anche un file package.json per gestire le dipendenze, in modo da mantenere facilmente aggiornati i dati con l'ultima versione di Blockly.

Include anche alcuni pratici script iniziali, ad esempio uno per testare il progetto localmente in un browser:

cd hello-world
npm run start

Per altri comandi, puoi fare riferimento al file package.json generato.

Annulla pacchetto

Se hai solo idee e non vuoi eseguire il bootstrap puoi caricare Blockly from unpkg utilizzando i tag di script.

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

Non si tratta di una buona soluzione a lungo termine per l'acquisizione di Blockly, in quanto funziona con bundler come webpack, ma è ideale per la prototipazione e degli esperimenti.

Ottieni il codice

Esistono diversi modi per ottenere il codice in modo che esegua Blockly.

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

• Rimanere aggiornati è più facile con le modifiche in Blockly
• Incoraggia l'utilizzo di plug-in al posto del monkeypatching Blockly

Gestione dei partner di rete

npm install blockly --save

Filato

yarn add blockly

GitHub

Puoi anche scaricare il codice compresso dal nostro Release di GitHub. Tuttavia, per farlo devi eseguire manualmente scarica il codice a intervalli regolari per ricevere gli ultimi aggiornamenti e correzioni per Blockly.

Attenzione: i download di GitHub sono forniti solo per comodità degli sviluppatori che in precedenza creavano il biforcazione di Blockly. Se sei un nuovo sviluppatore, devi utilizzare una gestore di pacchetti.

Carica il codice

Una volta ricevuto il codice, puoi accedervi in vari modi dal tuo le API nel tuo 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 di 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é il vengono applicati direttamente all'array Blockly.Msg.

Importazioni

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

Quando importi i file dei messaggi, devi applicarli.

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 richiedi i file dei messaggi, devi applicarli.

Blockly.setLocale(En);