Plug-in

Un plug-in è un pezzo di codice autonomo che aggiunge funzionalità a Blockly. Ad esempio, potrebbe aggiungere un campo personalizzato, definire un nuovo tema o fornire un visualizzatore personalizzato. I plug-in vengono generalmente pacchettizzati e distribuiti tramite npm.

Nota: l'oggetto BlocklyOptions possiede una proprietà plugins per iniettare classi che personalizzano il comportamento di Blockly. Sebbene queste classi possano essere implementate come plug-in, non è obbligatorio e non sono correlate.

Per una breve introduzione ai plug-in, consulta il nostro intervento Panoramica dei plug-in (2021).

Se vuoi creare il tuo plug-in, consulta Aggiungere un plug-in.

Plug-in proprietari e di terze parti

I plug-in proprietari sono supportati dal team di Blockly e pubblicati nell'ambito@blockly su npm. Sono progettati per essere utilizzati in una vasta gamma di applicazioni Blockly.

I plug-in di terze parti vengono gestiti e pubblicati in modo indipendente. Potrebbero essere più complesse, più sperimentali o avere come target un ambito più ristretto di applicazioni Blockly.

Trovare un plug-in

• Visita la pagina Blockly Plugins & Demo, che contiene demo in tempo reale dei plug-in proprietari.

• Cerca keyword:blockly-plugin su npm. I plug-in con l'ambito @blockly sono pubblicati dal team di Blockly. Per risultati più ampi, cerca keyword:blockly o blockly.

• Consulta la directory blockly-samples/plugins su GitHub, che è il repository dei plug-in proprietari. Ogni plug-in ha un file README che descrive il suo comportamento e l'utilizzo previsto.

Installare un plug-in

Ti consigliamo di installare i plug-in con un gestore di pacchetti come npm o yarn. In questo modo è facile ricevere aggiornamenti.

• Installare un plug-in con un gestore dei pacchetti

  npm

  npm install @blockly/field-angle
  

  filo

  yarn add @blockly/field-angle
  

• Installare un plug-in senza un gestore dei pacchetti

  unpkg

  <script src="https://unpkg.com/@blockly/field-angle"></script>
  

  Puoi anche clonare il repository GitHub che contiene il plug-in. Per i plug-in proprietari, il valore è blockly-samples.

Controlla il file README del plug-in per verificare se sono presenti istruzioni di installazione aggiuntive.

Utilizzare un plug-in

Ogni plug-in è diverso, quindi consulta il file README del plug-in per informazioni su come usarlo. L'esempio seguente mostra come utilizzare il @blockly/field-angle plug-in:

1. Importa il codice dal plug-in. La procedura dipende dalla modalità di installazione del plug-in.

   npm o yarn

   import Blockly from 'blockly';
   import {registerFieldAngle} from '@blockly/field-angle';
   

   unpkg

   Non è necessario utilizzare un'istruzione import.

   Repository clonato

   import {registerFieldAngle} from 'path/to/plugin';
   

2. Inizializza il plug-in in base alle esigenze. I plug-in che forniscono campi personalizzati spesso richiedono di registrarli:

   registerFieldAngle();
   

3. Utilizza il plug-in.

   Blockly.common.defineBlocksWithJsonArray([
     {
       type: "my_angle_block",
       message0: "%1 degrees",
       args0: [
         {
           // Use @blockly/field-angle.
           type: "field_angle",
           name: "FIELDNAME",
           value: 45,
         },
       ],
       output: null,
       style: 'math_blocks'
     },
   ]);
   

   

Versioni dei plug-in

I plug-in in blockly-samples utilizzano il controllo delle versioni semantico, che richiede modifiche che causano interruzioni per utilizzare una nuova versione principale. Qualsiasi nuovo plug-in che applica patch al codice di base avrà una versione principale pari a 0 per indicare lo sviluppo iniziale.

La maggior parte dei plug-in include il pacchetto blockly come peerDependency anziché come dependency. Questo perché presupponiamo che tu abbia già installato Blockly. Non ha senso utilizzare un plug-in senza usare Blockly. In questo modo puoi gestire autonomamente la versione di Blockly, ma devi anche controllare il package.json del plug-in per determinare la versione minima di Blockly richiesta. Se un plug-in viene aggiornato in modo da richiedere una versione più recente di Blockly, si tratta di una modifica che provoca un errore e la relativa versione principale verrà aumentata.

Quando aggiungi un plug-in a package.json della tua applicazione, per impostazione predefinita viene incluso un carattere a capo prima della versione:

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

In questo modo, npm può installare qualsiasi versione minore pari o superiore a quella elencata, quindi la versione 5.0.20 o 5.1.0 funziona, ma una nuova versione principale come 6.0.1 no. Quando esegui l'aggiornamento a una nuova versione di Blockly, è buona norma verificare se anche i tuoi plug-in possono essere aggiornati a una nuova versione principale.