Plug-ins

Un plug-in est un élément de code autonome qui ajoute des fonctionnalités à Blockly. Par exemple, il peut ajouter un champ personnalisé, définir un nouveau thème ou fournir un moteur de rendu personnalisé. Les plug-ins sont généralement empaquetés et distribués via npm.

Pour une présentation rapide des plug-ins, consultez notre présentation sur les plug-ins (2021).

Si vous souhaitez créer votre propre plug-in, consultez la section Ajouter un plug-in.

Plug-ins propriétaires et tiers

Les plug-ins propriétaires sont compatibles avec l'équipe Blockly et publiés sous le champ d'application @blockly sur npm. Ils sont conçus pour être utilisables dans un large éventail d'applications Blockly.

Les plug-ins tiers sont gérés et publiés indépendamment. Ils peuvent être plus complexes, plus expérimentaux ou cibler un éventail plus restreint d'applications Blockly.

Rechercher un plug-in

  • Consultez la page Plug-ins et démos Blockly, qui propose des démos en direct de plug-ins propriétaires.

  • Recherchez keyword:blockly-plugin sur npm. Les plug-ins dont le champ d'application est @blockly sont publiés par l'équipe Blockly. Pour obtenir des résultats plus larges, recherchez keyword:blockly ou blockly.

  • Consultez le blockly-samples/plugins répertoire sur GitHub, qui est le dépôt des plug-ins propriétaires. Chaque plug-in possède un fichier README qui décrit son comportement et son utilisation prévue.

Installer un plug-in

Nous vous recommandons d'installer des plug-ins avec un gestionnaire de packages tel que npm ou yarn. Cela facilite la réception des mises à jour.

  • Installer un plug-in avec un gestionnaire de packages

    npm

    npm install @blockly/field-angle

    fil

    yarn add @blockly/field-angle

  • Installer un plug-in sans gestionnaire de packages

    unpkg

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

    Vous pouvez également cloner le dépôt GitHub contenant le plug-in. Pour les plug-ins propriétaires, il s'agit de blockly-samples.

Consultez le fichier README du plug-in pour voir s'il existe des instructions d'installation supplémentaires.

Utiliser un plug-in

Chaque plug-in est différent. Consultez donc le fichier README du plug-in pour savoir comment l'utiliser. L'exemple suivant montre comment utiliser le @blockly/field-angle plug-in :

  1. Importez le code à partir du plug-in. La procédure à suivre dépend de la façon dont vous avez installé le plug-in.

    npm ou fil

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

    unpkg

    Vous n'avez pas besoin d'utiliser d'instruction import.

    Dépôt cloné

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

  2. Initialisez le plug-in si nécessaire. Les plug-ins qui fournissent des champs personnalisés vous obligent souvent à enregistrer le champ :

    registerFieldAngle();

  3. Utilisez le 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'
  },
]);

    Champ permettant de sélectionner un angle à partir d&#39;un cadran à 360 degrés.

Versions du plug-in

Les plug-ins dans blockly-samples utilisent la gestion sémantique des versions, ce qui nécessite des modifications importantes pour utiliser une nouvelle version majeure. Tout nouveau plug-in qui corrige le cœur aura une version majeure de 0 pour indiquer le développement initial.

La plupart des plug-ins incluent le blockly package en tant que peerDependency plutôt qu'en tant que dependency. En effet, nous partons du principe que vous avez déjà installé Blockly. (Il n'est pas logique d'utiliser un plug-in sans utiliser Blockly.) Cela vous permet de gérer vous-même la version de Blockly, mais vous oblige également à vérifier le package.json du plug-in pour déterminer la version minimale de Blockly requise. Si un plug-in est mis à jour pour nécessiter une version plus récente de Blockly, cela est considéré comme une modification importante et sa version majeure sera augmentée.

Lorsque vous ajoutez un plug-in au package.json de votre application, la valeur par défaut consiste à inclure un accent circonflexe avant la version :

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

Cela permet à npm d'installer n'importe quelle version mineure égale ou supérieure à la version listée. Par conséquent, les versions 5.0.20 ou 5.1.0 fonctionnent, mais pas une nouvelle version majeure telle que 6.0.1. Lorsque vous passez à une nouvelle version de Blockly, il est conseillé de vérifier si l'un de vos plug-ins peut également être mis à jour vers une nouvelle version majeure.