Ricevi il codice

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

Script create-package

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

Per farlo, devi 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

Questi creano un pacchetto che importa i target del pacchetto. Utilizza anche un file package.json per gestire le dipendenze, il che semplifica l'aggiornamento all'ultima versione di Blockly.

Sono inclusi anche alcuni script di avvio utili, 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.

Unpkg

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

Se aggiungi il seguente codice a una pagina HTML, puoi aprire l'HTML direttamente in un 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>

Questa non è una buona soluzione a lungo termine per acquisire Blockly, perché non funziona con i 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 (come NPM o Yarn) perché:

• È più facile rimanere al corrente delle modifiche apportate a Blockly
• Incoraggia l'utilizzo di plug-in anziché la patch di Blockly

NPM

npm install blockly --save

Filato

yarn add blockly

GitHub

Puoi anche scaricare il codice compresso dalle nostre versioni di GitHub. Tuttavia, ciò richiede di scaricare manualmente il codice a intervalli regolari per ricevere gli aggiornamenti e le correzioni più recenti di Blockly.

Avviso: i download di GitHub vengono forniti solo per comodità degli sviluppatori che in precedenza eseguivano il fork di Blockly. Se sei un nuovo sviluppatore, devi utilizzare un gestore di pacchetti.

Carica il codice

Una volta ottenuto il codice, esistono diversi modi per accedervi dal 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 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 script, non puoi avere più file di messaggi perché i messaggi vengono applicati direttamente all'array Blockly.Msg.

Importazioni

Nota: l'utilizzo delle importazioni dei nostri target di pacchetti richiede l'utilizzo di 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';

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

Blockly.setLocale(En);