Code abrufen

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

„create-package“-Skript

Blockly bietet ein Skript, mit dem eine Starteranwendung gebootstrappt wird, die Sie dann ändern können. Es werden gängige Webentwicklungstools wie webpack und eslint verwendet, 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 ganz einfach auf dem neuesten Stand der Blockly-Version bleiben können.

Außerdem sind einige praktische Startskripts enthalten, z. B. eines zum lokalen Testen des Projekts in einem Browser:

cd hello-world
npm run start

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

Unpkg

Wenn Sie nur mit Ideen spielen und keine vollständige Anwendung erstellen möchten, können Sie Blockly über Script-Tags von unpkg laden.

Wenn Sie einer beliebigen HTML-Seite Folgendes hinzufügen, können Sie die HTML-Seite 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 sie nicht mit Bundlern wie webpack funktioniert. Sie eignet sich jedoch gut für Prototyping und Experimente.

Code abrufen

Es gibt mehrere Möglichkeiten, den Code zum Ausführen von Blockly zu erhalten.

Das Blockly-Team empfiehlt, Blockly über einen Paketmanager (z. B. NPM oder Yarn) zu verwenden, da:

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

Node Package Manager

npm install blockly --save

Garn

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 Fehlerkorrekturen für Blockly zu erhalten.

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

Code laden

Nachdem Sie den Code erhalten haben, gibt es mehrere Möglichkeiten, 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 Script-Tags verwenden, können Sie über den globalen Namespace auf Importe 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 nicht mehrere Nachrichtendateien haben, da die Nachrichten direkt auf das Blockly.Msg-Array angewendet werden.

Importe

Hinweis :Wenn Sie Importe unserer Paketziele verwenden, müssen Sie einen Bundler (z. B. 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);