Obtenir le code

Il existe plusieurs façons d'obtenir le code Blockly et de le charger une fois que vous l'avez obtenu.

Script create-package

Blockly fournit un script qui amorce une application de démarrage que vous pouvez ensuite modifier. Il utilise des outils de développement Web courants tels que webpack et eslint, mais n'inclut pas de framework, comme React ou Angular.

Pour cela, vous devez installer node.js et npm avant d'exécuter les commandes suivantes.

Pour créer une application écrite en JavaScript dans un nouveau répertoire hello-world :

npx @blockly/create-package app hello-world

Pour créer une application écrite en TypeScript dans un nouveau répertoire hello-world :

npx @blockly/create-package app hello-world --typescript

Cela crée un package qui importe les cibles du package. Il utilise également un fichier package.json pour gérer les dépendances, ce qui permet de rester facilement à jour avec la dernière version de Blockly.

Il est également fourni avec des scripts de démarrage pratiques, comme celui permettant de tester le projet localement dans un navigateur :

cd hello-world
npm run start

Vous pouvez vous référer au fichier package.json généré pour d'autres commandes.

Unpkg

Si vous souhaitez simplement tester des idées et que vous ne voulez pas amorcer une application complète, vous pouvez charger Blockly à partir d'unpkg à l'aide de balises de script.

Si vous ajoutez le code suivant à une page HTML, vous pouvez ouvrir le code HTML directement dans un navigateur pour tester Blockly :

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

Il ne s'agit pas d'une bonne solution à long terme pour acquérir Blockly, car elle ne fonctionne pas avec les bundlers comme webpack, mais elle est idéale pour le prototypage et l'expérimentation.

Obtenir le code

Il existe plusieurs façons d'obtenir le code pour exécuter Blockly.

L'équipe Blockly recommande d'exiger Blockly via un gestionnaire de packages (comme NPM ou Yarn) pour les raisons suivantes :

• Il est plus facile de se tenir informé des modifications apportées à Blockly.
• Il encourage l'utilisation de plug-ins au lieu de monkeypatching Blockly.

NPM

npm install blockly --save

Laine

yarn add blockly

GitHub

Vous pouvez également télécharger le code compressé à partir de nos versions GitHub. Toutefois, cela vous oblige à télécharger manuellement le code à intervalles réguliers pour recevoir les dernières mises à jour et corrections de Blockly.

Avertissement : Les téléchargements GitHub ne sont fournis que pour faciliter la tâche des développeurs qui effectuaient auparavant des forks de Blockly. Si vous êtes un nouveau développeur, vous devez utiliser un gestionnaire de packages.

Charger le code

Une fois que vous avez obtenu le code, vous pouvez y accéder de plusieurs façons à partir de votre code.

Tags de script

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

Lorsque vous utilisez des balises de script, vous pouvez accéder aux importations à partir de l'espace de noms global :

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

Remarque : Lorsque vous utilisez des balises de script, vous ne pouvez pas avoir plusieurs fichiers de messages, car les messages sont appliqués directement au tableau Blockly.Msg.

Importations

Remarque : Pour utiliser les importations de nos cibles de package, vous devez utiliser un bundler (comme webpack), car Blockly est fourni sous forme d'UMD plutôt que d'ESM.

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

Lorsque vous importez les fichiers de messages, vous devez également les appliquer.

Blockly.setLocale(En);

Nécessite

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

Lorsque vous avez besoin des fichiers de messages, vous devez également les appliquer.

Blockly.setLocale(En);