Hol dir Blockly

Es gibt verschiedene Möglichkeiten, den Blockly-Code abzurufen, und mehrere Möglichkeiten, ihn nach Erhalt zu laden.

Script für die Paketerstellung

Blockly stellt ein Script zum Bootstrapping einer Startanwendung bereit, das Sie dann ändern können. Sie verwendet gängige Webentwicklungstools wie Webpack und eslint, enthält aber kein Framework wie React oder Angular.

Dazu müssen Sie node.js und npm installieren, bevor Sie die folgenden Befehle ausführen können.

So erstellen Sie eine in JavaScript geschriebene Anwendung in einem neuen hello-world-Verzeichnis:

npx @blockly/create-package app hello-world

So erstellen Sie eine in TypeScript geschriebene Anwendung in einem neuen hello-world-Verzeichnis:

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

Diese erstellen ein Paket, das Paketziele importiert. Außerdem wird eine package.json-Datei zur Verwaltung von Abhängigkeiten verwendet, wodurch es einfach wird, mit der neuesten Version von Blockly auf dem neuesten Stand zu bleiben.

Es enthält auch einige praktische Startskripts, z. B. eines zum lokalen Testen des Projekts in einem Browser:

cd hello-world
npm run start

Weitere Befehle finden Sie in der generierten „package.json“-Datei.

Entpacken

Wenn Sie nur mit Ideen experimentieren und keine vollständige Anwendung Bootstrapping durchführen möchten, können Sie Blockly mithilfe von Skript-Tags aus unpkg laden.

Wenn Sie einer HTML-Seite Folgendes hinzufügen, können Sie den HTML-Code direkt in einem Browser öffnen, um mit Blockly zu experimentieren:

<!-- 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>

Dies ist keine gute langfristige Lösung für die Übernahme von Blockly, da sie nicht mit Bundlern wie Webpack funktioniert, aber gut für Prototyping und Experimente geeignet ist.

Code abrufen

Es gibt mehrere Möglichkeiten, den Code zur Ausführung von Blockly abzurufen.

Das Blockly-Team empfiehlt aus folgenden Gründen, dass Blockly über einen Paketmanager (wie NPM oder Yarn) angefordert wird:

• Es ist einfacher, über Änderungen in Blockly auf dem Laufenden zu bleiben.
• Es empfiehlt sich, Plug-ins zu verwenden, anstatt Blockly als Monkeypatching zu verwenden.

Node Package Manager

npm install blockly --save

yarn

yarn add blockly

GitHub

Sie können den komprimierten Code auch aus unseren GitHub-Releases herunterladen. Dazu müssen Sie den Code jedoch in regelmäßigen Abständen manuell herunterladen, um die neuesten Updates und Fehlerbehebungen für Blockly zu erhalten.

Warnung: GitHub-Downloads sind nur für Entwickler gedacht, die zuvor Blockly abgespalten haben. Wenn Sie ein neuer Entwickler sind, sollten Sie einen Paketmanager verwenden.

Code laden

Es gibt verschiedene Möglichkeiten, nach dem Abrufen des Codes darauf zuzugreifen.

Skript-Tags

<!-- 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>

Wenn Sie Skript-Tags verwenden, können Sie auf Importe aus dem globalen Namespace zugreifen:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

Hinweis: Bei Verwendung von Script-Tags können Sie nicht mehrere Meldungsdateien haben, da die Nachrichten direkt auf das Array Blockly.Msg angewendet werden.

Importe

Hinweis: Für die Verwendung von Importen unserer Paketziele ist ein Bundler (z. B. Webpack) erforderlich, da Blockly als UMD und nicht als ESM verpackt ist.

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

Wenn Sie die Nachrichtendateien importieren, müssen Sie auch diese anwenden.

Blockly.setLocale(En);

Erforderlich

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

Wenn Sie die Nachrichtendateien benötigen, müssen Sie sie auch anwenden.

Blockly.setLocale(En);