Plug-ins

Un plug-in est un morceau 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 des plug-ins (2021).

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

Plug-ins propriétaires et tiers

Les plug-ins propriétaires sont pris en charge par l'équipe Blockly et publiés sous le champ d'application @blockly sur npm. Ils sont conçus pour être utilisés 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 ciblés sur une gamme plus restreinte d'applications Blockly.

Rechercher un plug-in

  • Consultez Blockly Plugins & Demos (Plugins et démonstrations Blockly), qui propose des démonstrations en direct des plug-ins propriétaires.

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

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

Installer un plug-in

Nous vous recommandons d'installer les plug-ins à l'aide d'un gestionnaire de paquets tel que npm ou yarn. Cela vous permet de recevoir facilement des mises à jour.

  • Installer un plug-in avec un gestionnaire de paquets

    npm

    npm install @blockly/field-angle

    fil

    yarn add @blockly/field-angle

  • Installer un plug-in sans gestionnaire de paquets

    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 le fichier README du plug-in pour savoir comment l'utiliser. L'exemple suivant montre comment utiliser le plug-in @blockly/field-angle:

  1. Importez le code du plug-in. La procédure à suivre dépend de la manière dont vous avez installé le plug-in.

    npm ou yarn

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

    unpkg

    Vous n'avez pas besoin d'utiliser une 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 de blockly-samples utilisent la gestion sémantique des versions, qui nécessite des modifications destructives pour utiliser une nouvelle version majeure. Tout nouveau plug-in qui modifie le noyau aura une version majeure de 0 pour indiquer le développement initial.

La plupart des plug-ins incluent le package blockly 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 devez é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, il s'agit d'une modification destructive et sa version majeure sera augmentée.

Lorsque vous ajoutez un plug-in à package.json de votre application, un crochet est inclus par défaut 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, la version 5.0.20 ou 5.1.0 fonctionne, mais une nouvelle version majeure telle que 6.0.1 ne le fait pas. Lorsque vous passez à une nouvelle version de Blockly, il est conseillé de vérifier si certains de vos plug-ins peuvent également être mis à niveau vers une nouvelle version majeure.