Il existe plusieurs façons d'obtenir le code Blockly et de le charger. une fois que vous l’avez obtenu.
Créer le script du package
Blockly fournit un script qui amorce une application de démarrage, que vous pouvez puis modifier. Elle 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, procédez comme suit:
npx @blockly/create-package app hello-world
Pour créer une application écrite en TypeScript dans un nouveau répertoire hello-world, procédez comme suit:
npx @blockly/create-package app hello-world --typescript
Celles-ci créent un package qui importe les cibles de packages. Elle utilise également un package.json pour gérer les dépendances, ce qui facilite la mise à jour avec la dernière version de Blockly.
Il est également fourni avec des scripts de démarrage pratiques, comme un pour tester le projet en local 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.
Déballer
Si vous ne voulez pas démarrer une session complète d'idées, vous pouvez charger Blockly depuis unpkg à l'aide de tags 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 acquérir Blockly, car elle ne fonctionne avec des bundles comme webpack, mais il est utile pour le prototypage et l'expérimentation.
Obtenir le code
Il existe plusieurs façons d'obtenir le code permettant d'exécuter Blockly.
L'équipe Blockly recommande d'exiger Blockly via un gestionnaire de packages (comme NPM ou Yarn) pour les raisons suivantes:
- Vous pouvez vous tenir plus facilement informé des modifications dans 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 notre Versions de GitHub Toutefois, pour cela, vous devez téléchargez le code à intervalles réguliers afin de recevoir les dernières mises à jour. et corrections de Blockly.
Charger le code
Une fois que vous avez le code, vous pouvez y accéder à partir de votre du code source.
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');
Lorsque vous avez besoin des fichiers de messages, vous devez également les appliquer.
Blockly.setLocale(En);