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 lance 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 ce faire, 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

Ils créent un package qui importe des cibles de 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 consulter le fichier package.json généré pour obtenir d'autres commandes.

Unpkg

Si vous ne faites que tester des idées et que vous ne souhaitez pas démarrer 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>

Ce n'est pas une bonne solution à long terme pour acquérir Blockly, car il ne fonctionne pas avec les bundlers comme webpack, mais il est utile pour le prototypage et l'expérimentation.

Obtenir le code

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

L'équipe Blockly recommande d'exiger Blockly via un gestionnaire de paquets (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 modifier 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, vous devez télécharger manuellement le code à intervalles réguliers pour recevoir les dernières mises à jour et corrections de Blockly.

Charger le code

Une fois que vous avez reçu le code, plusieurs options s'offrent à vous pour y accéder.

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;

Importations

// 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);