Esistono diversi modi per ottenere il codice Blockly e diversi modi per caricarlo dopo averlo ottenuto.
Script create-package
Blockly fornisce uno script che avvia un'applicazione di avvio, che puoi poi modificare. Utilizza strumenti di sviluppo web comuni come webpack e 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
Vengono creati pacchetti che importano i target dei pacchetti. Utilizza inoltre un file package.json per gestire le dipendenze, il che semplifica il mantenimento aggiornato con la versione più recente di Blockly.
Inoltre, include 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 vuoi solo provare alcune idee e non vuoi avviare un'applicazione completa, puoi caricare Blockly da unpkg utilizzando i tag script.
Se aggiungi quanto segue a qualsiasi 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>
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 far eseguire il codice di Blockly.
Il team di Blockly consiglia di richiedere Blockly tramite un gestore dei pacchetti (come NPM o Yarn) perché:
- È più facile rimanere al passo con le modifiche in Blockly
- Incoraggia l'utilizzo dei plug-in anziché del monkey patching di Blockly
NPM
npm install blockly --save
Filato
yarn add blockly
GitHub
Puoi anche scaricare il codice compresso dalle nostre release di GitHub. Tuttavia, devi scaricare manualmente il codice a intervalli regolari per ricevere gli aggiornamenti e le correzioni più recenti di Blockly.
Carica il codice
Una volta ricevuto il codice, hai a disposizione diversi modi per accedervi.
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;
Importazioni
// 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);