Il existe plusieurs façons d'obtenir le code Blockly et de le charger une fois que vous l'avez obtenu.
Script de création de package
Blockly fournit un script qui démarre 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
Ces éléments créent un package qui importe les cibles de packages. 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, tels que 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 accéder à d'autres commandes.
Déballer
Si vous ne faites que tester des idées et ne souhaitez pas amorcer une application complète, vous pouvez charger Blockly depuis unpkg à l'aide de balises de script.
Si vous ajoutez les éléments suivants à 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 l'acquisition de Blockly, car elle ne fonctionne pas avec des bundlers tels que webpack, mais elle est bonne 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 rester informé des modifications dans Blockly
- Il encourage l'utilisation de plug-ins au lieu de monkeypatching Blockly.
NPM
npm install blockly --save
Yarn
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 afin de recevoir les dernières mises à jour et correctifs de Blockly.
Charger le code
Une fois que vous avez obtenu le code, vous pouvez y accéder à partir de votre code de plusieurs façons.
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 tags 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');
Si vous avez besoin des fichiers de messages, vous devez également les appliquer.
Blockly.setLocale(En);