Hol dir Blockly

Es gibt verschiedene Möglichkeiten, den Blockly-Code abzurufen und ihn zu laden. sobald Sie es erhalten haben.

Script erstellen

Blockly stellt ein Skript bereit, das Bootstrapping einer Startanwendung ausführt, und diese dann anpassen. Es nutzt gängige Webentwicklungstools wie webpack und eslint, enthält aber kein Framework wie React oder Angular.

Dazu müssen Sie vor der Ausführung node.js und npm installieren die folgenden Befehle.

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

Damit wird ein Paket erstellt, das Paketziele importiert. Außerdem wird ein package.json zur Verwaltung von Abhängigkeiten, sodass Sie immer auf dem neuesten Stand bleiben mit der neuesten Version von Blockly.

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

cd hello-world
npm run start

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

Entfernen

Wenn Sie nur mit Ideen experimentieren und kein komplettes Bootstrapping 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 mit Blockly zu testen:

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

Das ist keine gute langfristige Lösung, um Blockly zu erwerben, mit Bundlern wie Webpack arbeiten, aber gut für Prototyping und zu experimentieren.

Code abrufen

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

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

• Es ist einfacher, über Änderungen in Blockly auf dem Laufenden zu bleiben
• Die Verwendung von Plug-ins anstelle von Monkey Patching von Blockly wird empfohlen.

Node Package Manager

npm install blockly --save

yarn

yarn add blockly

GitHub

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

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

Code laden

Nachdem Sie den Code erhalten haben, können Sie ihn auf verschiedene Weise aufrufen: Code.

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

Importe

Hinweis: Für Importe unserer Paketziele müssen Sie einen Bundler verwenden. (wie Webpack), 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);