Build-Skripts von Blockly

Blockly besteht aus über hundert TypeScript-Dateien. Diese müssen vom TypeScript-Compiler tsc in JavaScript kompiliert werden, bevor sie verwendet werden können. Dadurch wird eine gleich große Anzahl von .js-Dateien erstellt, die sich gut eignen, für lokale Tests, aber das Laden einer großen Anzahl von Dateien über das Internet wirkt sich negativ auf die Nutzererfahrung aus. Damit Blockly schneller geladen wird, Closure Compiler wird verwendet, um die Daten in einem halben Dutzend Dateien ("Bundles" oder „Chunks“), deren Gesamtgröße weniger als die Hälfte der unkomprimierten Dateien beträgt.

Code mit den neuesten ECMAScript-Funktionen, die möglicherweise nicht mit allen Browsern kompatibel – bis zu ES6 transpiliert werden, der mit den meisten gängigen Browsern kompatibel ist. Daher ist es wichtig, dass Sie Ihren Endnutzern nur den minimierten Code zur Verfügung stellen.

Das google/blockly-Repository enthält nur den Quellcode. Zuvor enthielten sie auch die Build-Produkte, doch seit 2019 werden die komprimierten Gebinde als die blockly npm-Paket und seit 2022 auch als .tgz-Datei an jedes GitHub-Release angehängt. um Blockly zu entwickeln, es sei denn, Sie hacken auf Blockly selbst, insbesondere bei Dateien in den Verzeichnissen core, blocks, generators oder msg enthalten.

Der Prozess zum Erstellen, Testen und Veröffentlichen von Blockly ist automatisiert mithilfe von npm-Skripts zum Ausführen von Gulp Aufgaben Auf dieser Seite werden die wichtigsten Scripts und ihre Funktionsweise beschrieben.

Komprimierter und unkomprimierter Modus

Laden von Blockly direkt aus den einzelnen .js-Dateien, die vom Der TypeScript-Compiler wird als "unkomprimierter Modus" bezeichnet. Da mehrere langsame Buildschritte vermieden werden, wird ein schneller Bearbeitungs-, Kompilierungs- und Ausführungszyklus ermöglicht. Außerdem wird die Fehlerbehebung erleichtert, da der ausgeführte JavaScript-Code fast so lesbar ist wie die ursprünglichen TypeScript-Quellen. Die Abhängigkeit von Sourcemaps entfällt.

Das Laden von Blockly aus den minimierten Bundles wird als „komprimierter Modus“ bezeichnet. Dies ist die beste Methode, um Änderungen an Blockly zu testen, wenn sie als Abhängigkeit verwendet wird eines anderen Pakets, da damit (eine unveröffentlichte Version) von blockly getestet wird npm-Pakets.

Hinweis: Es gibt einige Stellen im Blockly-Repository, an denen die Begriffe "unkompilierter Modus" und „Compiled-Modus“, werden als Synonyme für „unkomprimiert Modus und im „komprimierten Modus“ . Diese Verwendung war in der Vergangenheit sinnvoll, da der Closure Compiler zum Komprimieren (Minifizieren) des Codes verwendet wurde. Jetzt ist der TypeScript-Compiler jedoch immer erforderlich, auch im unkomprimierten Modus. Daher ist diese alternative Terminologie potenziell verwirrend und wird nicht empfohlen.

Schnellstart

Falls Sie lokale Änderungen vorgenommen haben und sicherstellen möchten, dass dadurch nicht die Funktionen oder Tests ausführen, führen Sie
```
npm test
```
um Blockly zu entwickeln und die Testsuite auszuführen.
Wenn Sie lokale Änderungen im Browser testen möchten, führen Sie den folgenden Befehl aus:
```
npm start
```
Dadurch wird Blockly kompiliert und ein Webbrowser geöffnet, der auf Blockly verweist Playground, auf dem Blockly im unkomprimierten Modus ausgeführt wird.

Alle geänderten Dateien in core/, blocks/ und generators/ werden automatisch neu kompiliert. Aktualisieren Sie den Browsertab, um die Änderungen zu sehen.
Erstellen und testen Sie Ihre lokal geänderte Blockly-Version in komprimierter Form als Abhängigkeit eines anderen npm-Pakets
```
npm run package
```
ein Blockly-Paket zu erstellen,
```
cd dist && npm link
```
an, um npm mitzuteilen, wo es die kompilierten Dateien finden kann, und dann cd zum Verzeichnis Ihres Projekts, bevor Sie es ausführen.
```
npm link blockly
```
wird für Ihr Paket die frisch kompilierte Version von Blockly anstelle des veröffentlichten blockly-Pakets verwendet.

Detaillierte Scriptreferenz

In diesem Abschnitt wird das Prinzip scripts in der Datei package.json von Blockly aufgeführt mit einer Erklärung, was sie tun.

Diese Scripts generieren Dateien an zwei Stellen:

Dateien im Unterverzeichnis build/ sind Zwischendateien, die für lokale oder von späteren Teilen der Build-Pipeline übernommen.
Die Dateien im Unterverzeichnis dist/ bilden den Inhalt des veröffentlichten npm-Pakets.

Keines der Verzeichnisse wird im blockly-Git-Repository verfolgt.

`clean`

npm run clean bereinigt alle vorherigen Builds, indem build/ und dist/ Verzeichnisse. Nützlich zur Behebung von Arkanen Build-Fehlern, insbesondere die durch das Umbenennen einer Quelldatei verursacht werden.

`messages`

npm run messages aktualisiert die Nachrichtendateien in msg/json/ mit allen Änderungen, die an msg/messages.js vorgenommen wurden. Es sollte jedes Mal ausgeführt werden, wenn diese Datei geändert wird.

`langfiles`

npm run langfiles generiert die kompilierten Sprachdateien in build/msg/ aus den Nachrichtendateien in msg/json.

`tsc`

npm run tsc führt den TypeScript-Compiler für den Inhalt von core/ aus, blocks/ und generators/ und gibt einzelne .js-Dateien aus an build/src/.

`minify`

npm run minify führt closure-make-deps und closure-calculate-chunks aus um zu bestimmen, wie die kompilierten .js-Dateien in Blöcke unterteilt werden (minifizierte Bundles), danach wird closure-compiler ausgeführt, um die Blöcke als folgt:

Der Inhalt von build/src/core/ wird zu dist/blockly_compressed.js.
Der Inhalt von build/src/blocks/ wird zu dist/blocs_compressed.js.
Der Inhalt von build/src/generators/javascript/ (plus build/src/generators/javascript.js) wird zu dist/javascript_compressed.js.
Dasselbe gilt für dart, lua, php und python.

Die generierten Chuks verwenden einen Wrapper, um die Kompatibilität mit der Universal- Moduldefinition, sodass keine zusätzliche Verarbeitung bevor sie in das Paket aufgenommen werden.

`build`

npm run build führt die Aufgaben minify und langfiles aus. Damit sollte alles Notwendige zum Laden des Blockly-Labs im komprimierten oder unkomprimierten Modus erledigt sein.

`package`

npm run package führt die Aufgaben clean und build aus und führt dann Folgendes aus:

Wendet einen UMD-Wrapper auf die Dateien an build/msg/, wobei die zusammengefassten Versionen in dist/msg/ platziert werden.
Fügen Sie dist/ verschiedene zusätzliche Supportdateien mit UMD-Wrappern hinzu, sofern zutreffend.

`publish`

npm run publish wird vom Blockly-Team verwendet, um das npm-Paket blockly zu veröffentlichen. Sie hängt von der Google-internen Infrastruktur ab und ist daher nicht hilfreich. für externe Entwickler.

`lint`

npm run lint führt ESLint aus und führt eine statische Analyse durch des Blockly-Quellcodes, um Probleme zu finden.

`test`

npm test (oder npm run test) führt die Aufgabe package aus und führt dann verschiedene Automatisierte Tests (einschließlich der Ausführung von ESLint) Diese sollte ausgeführt – und übergeben – Code, der als Pull-Anfrage an das blockly-Repository gesendet wird.