Code abrufen

Es gibt mehrere Möglichkeiten, den Blockly-Code abzurufen und nach dem Abrufen zu laden.

Create-package-Script

Blockly bietet ein Script, mit dem eine Startanwendung gestartet wird, die Sie dann ändern können. Es 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.

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

Dadurch wird ein Paket erstellt, das Paketziele importiert. Außerdem wird eine „package.json“-Datei zum Verwalten von Abhängigkeiten verwendet, sodass Sie immer auf dem neuesten Stand der Blockly-Version bleiben.

Außerdem enthält es einige praktische Startscripts, z. B. eines zum Testen des Projekts lokal in einem Browser:

cd hello-world
npm run start

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

Unpkg

Wenn Sie nur mit Ideen herumspielen und keine vollständige Anwendung bootstrappen möchten, können Sie Blockly mithilfe von Script-Tags von unpkg laden.

Wenn Sie einer beliebigen 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 den Erwerb von Blockly, da es nicht mit Bundlern wie Webpack funktioniert. Es eignet sich jedoch gut für das Prototyping und Experimentieren.

Code abrufen

Es gibt mehrere Möglichkeiten, den Code so zu ändern, dass Blockly ausgeführt wird.

Das Blockly-Team empfiehlt, Blockly über einen Paketmanager wie NPM oder Yarn bereitzustellen. Das hat folgende Vorteile:

• Es ist einfacher, über Änderungen in Blockly auf dem Laufenden zu bleiben
• Es wird empfohlen, Plug-ins zu verwenden, anstatt Blockly zu verändern.

Node Package Manager

npm install blockly --save

Garn

yarn add blockly

GitHub

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

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

Code laden

Sobald Sie den Code erhalten haben, gibt es mehrere Möglichkeiten, darauf zuzugreifen.

Script-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 Script-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: Wenn Sie Script-Tags verwenden, können Sie keine mehrere Nachrichtendateien haben, da die Nachrichten direkt auf das Blockly.Msg-Array angewendet werden.

Importe

Hinweis: Wenn Sie Importe unserer Paketziele verwenden möchten, müssen Sie einen Bundler wie webpack verwenden, 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 sie auch 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);