Plug-ins

Ein Plug-in ist ein in sich geschlossener Codeblock, der Blockly Funktionen hinzufügt. So kann es beispielsweise ein benutzerdefiniertes Feld hinzufügen, ein neues Design definieren oder einen benutzerdefinierten Renderer bereitstellen. Plug-ins werden in der Regel über npm verpackt und verteilt.

Hinweis: Das BlocklyOptions Objekt hat eine plugins-Property zum Einfügen von Klassen, mit denen das Verhalten von Blockly angepasst werden kann. Diese Klassen können zwar als Plug-ins implementiert werden, dies ist jedoch nicht erforderlich und sie sind ansonsten nicht miteinander verbunden.

Eine kurze Einführung in Plug-ins finden Sie in unserem Vortrag Plugins Overview (2021).

Wenn Sie ein eigenes Plug-in erstellen möchten, lesen Sie den Hilfeartikel Add a plugin.

Plug-ins von Erst- und Drittanbietern

Plug-ins von Erstanbietern werden vom Blockly-Team unterstützt und unter dem Bereich @blockly auf npm veröffentlicht. Sie sind für die Verwendung in einer Vielzahl von Blockly-Anwendungen konzipiert.

Plug-ins von Drittanbietern werden unabhängig verwaltet und veröffentlicht. Sie können komplexer oder experimenteller sein oder auf einen engeren Bereich von Blockly-Anwendungen ausgerichtet sein.

Plug-in suchen

• Auf der Seite Blockly Plugins & Demos finden Sie Live- Demos von Plug-ins von Erstanbietern.

• Suchen Sie auf npm nach keyword:blockly-plugin. Plug-ins mit dem Bereich @blockly werden vom Blockly-Team veröffentlicht. Für umfassendere Ergebnisse suchen Sie nach keyword:blockly oder blockly.

• Siehe das blockly-samples/plugins Verzeichnis auf GitHub, das das Repository für Plug-ins von Erstanbietern ist. Jedes Plug-in hat eine README-Datei, in der sein Verhalten und die beabsichtigte Verwendung beschrieben werden.

Plug-in installieren

Wir empfehlen, Plug-ins mit einem Paketmanager wie npm oder yarn zu installieren. So erhalten Sie ganz einfach Updates.

• Plug-in mit einem Paketmanager installieren

  npm

  npm install @blockly/field-angle
  

  Garn

  yarn add @blockly/field-angle
  

• Plug-in ohne Paketmanager installieren

  unpkg

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

  Sie können auch das GitHub-Repository klonen, das das Plug-in enthält. Bei Plug-ins von Erstanbietern ist das blockly-samples.

In der README-Datei des Plug-ins finden Sie gegebenenfalls weitere Installationsanweisungen.

Plug-in verwenden

Jedes Plug-in ist anders. Informationen zur Verwendung des jeweiligen Plug-ins finden Sie in der README-Datei. Das folgende Beispiel zeigt, wie das @blockly/field-angle Plug-inverwendet wird:

1. Importieren Sie Code aus dem Plug-in. Die Vorgehensweise hängt davon ab, wie Sie das Plug-in installiert haben.

   npm oder yarn

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

   unpkg

   Sie müssen keine import-Anweisung verwenden.

   Geklontes Repository

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

2. Initialisieren Sie das Plug-in nach Bedarf. Bei Plug-ins, die benutzerdefinierte Felder bereitstellen, müssen Sie das Feld häufig registrieren:

   registerFieldAngle();
   

3. Verwenden Sie das 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'
     },
   ]);
   

   

Plug-in-Versionen

Plug-ins in blockly-samples verwenden die semantische Versionsverwaltung, für die Verwendung einer neuen Hauptversion sind funktionsgefährdende Änderungen erforderlich. Bei jedem neuen Plug-in, das Monkey-Patching für den Core verwendet, ist die Hauptversion 0, um die anfängliche Entwicklung zu kennzeichnen.

Die meisten Plug-ins enthalten das blockly Paket als peerDependency und nicht als dependency. Wir gehen davon aus, dass Sie Blockly bereits installiert haben. Es ist nicht sinnvoll, ein Plug-in zu verwenden, ohne Blockly zu verwenden. So können Sie die Blockly-Version selbst verwalten. Sie müssen jedoch auch die package.json-Datei des Plug-ins prüfen, um die erforderliche Mindestversion von Blockly zu ermitteln. Wenn ein Plug-in aktualisiert wird, sodass eine neuere Version von Blockly erforderlich ist, wird dies als funktionsgefährdende Änderung betrachtet und die Hauptversion wird erhöht.

Wenn Sie der package.json-Datei Ihrer Anwendung ein Plug-in hinzufügen, wird standardmäßig ein Caret vor der Version eingefügt:

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

So kann npm eine beliebige Nebenversion installieren, die der aufgeführten Version entspricht oder höher ist. Version 5.0.20 oder 5.1.0 funktioniert also, eine neue Hauptversion wie 6.0.1 jedoch nicht. Wenn Sie auf eine neue Version von Blockly aktualisieren, sollten Sie prüfen, ob auch eines Ihrer Plug-ins auf eine neue Hauptversion aktualisiert werden kann.