Plug-ins

Ein Plug-in ist ein eigenständiger Code, der Blockly um Funktionen erweitert. So können Sie beispielsweise ein benutzerdefiniertes Feld hinzufügen, ein neues Design definieren oder einen benutzerdefinierten Renderer bereitstellen. Plugins werden in der Regel über npm verpackt und verteilt.

Hinweis :Das BlocklyOptions-Objekt hat eine plugins-Property zum Einschleusen von Klassen, mit denen sich das Blockly-Verhalten anpassen lässt. Diese Klassen können zwar als Plug-ins implementiert werden, dies ist jedoch nicht erforderlich. Außerdem haben sie nichts miteinander zu tun.

Eine kurze Einführung in Plug-ins finden Sie in unserem Vortrag „Plug-ins – Übersicht“ (2021).

Informationen zum Erstellen eines eigenen Plug-ins finden Sie unter Plug-in hinzufügen.

Plug-ins von Erst- und Drittanbietern

Eigene Plug-ins werden vom Blockly-Team unterstützt und unter @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 gepflegt und veröffentlicht. Sie können komplexer, experimenteller oder auf eine kleinere Bandbreite von Blockly-Anwendungen ausgerichtet sein.

Plug-in finden

• Unter Blockly-Plug-ins und ‑Demos finden Sie Livedemos von selbst erstellten Plug-ins.

• Suchen Sie in npm nach keyword:blockly-plugin. Plugins mit dem Bereich @blockly werden vom Blockly-Team veröffentlicht. Wenn Sie mehr Ergebnisse sehen möchten, suchen Sie nach keyword:blockly oder blockly.

• Im blockly-samples/plugins-Verzeichnis auf GitHub finden Sie das Repository für selbst entwickelte Plug-ins. Jedes Plug-in hat eine README-Datei, in der sein Verhalten und seine beabsichtigte Verwendung beschrieben werden.

Plug-in installieren

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

• 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 eigenen Plugins ist das blockly-samples.

Lesen Sie in der README-Datei des Plug-ins nach, ob es zusätzliche Installationsanleitungen gibt.

Plug-in verwenden

Da jedes Plug-in anders ist, findest du in der README-Datei des jeweiligen Plug-ins Informationen zur Verwendung. Das folgende Beispiel zeigt die Verwendung des @blockly/field-angle-Plug-ins:

1. Code aus dem Plug-in importieren Wie Sie das tun, 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 Plugins, 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

Für Plugins in blockly-samples wird die semantische Versionierung verwendet. Das bedeutet, dass für die Verwendung einer neuen Hauptversion funktionsgefährdende Änderungen erforderlich sind. Jedes neue Plug-in, das Monkey-Patches für den Kern enthält, hat die Hauptversion 0, um die anfängliche Entwicklung zu kennzeichnen.

Die meisten Plug-ins enthalten das blockly-Paket als peerDependency und nicht als dependency. Das liegt daran, dass wir davon ausgehen, dass Sie Blockly bereits installiert haben. (Es macht keinen Sinn, ein Plug-in ohne Blockly zu verwenden.) So können Sie die Blockly-Version selbst verwalten. Sie müssen jedoch die package.json des Plug-ins prüfen, um die erforderliche Mindestversion von Blockly zu ermitteln. Wenn ein Plug-in aktualisiert wird und eine neuere Version von Blockly benötigt, gilt dies als funktionsgefährdende Änderung und die Hauptversion wird erhöht.

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

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

Dadurch kann npm jede 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.