Kompilacja zaawansowana

Zwykły proces kompilacji korzysta z internetowego kompilatora JavaScriptu Google, aby zredukować Blockly do kilku plików (łącznie około 720 KB (skompresowanych 160 KB). Możesz też użyć kompilatora offline JavaScript od Google w ramach „kompilacji zaawansowanej” tryb, który ma wiele zalet:

  • Łączny rozmiar Blockly został zmniejszony do 300 KB (100 KB w archiwum ZIP) dzięki zredukowaniu rozmiaru drzewa.
  • krótszy czas kompilacji i brak ruchu w sieci dzięki lokalnemu wykonywaniu kompilatora;
  • nieograniczona liczba kompilacji (kompilator online ma ograniczoną szybkość);

Konfiguracja

Na potrzeby tego krótkiego samouczka zacznij od utworzenia nowego katalogu w katalogu głównym Blockly.

Pobierz kompilator Closure Compiler.

Pobierz plik compiler.jar, zmień jego nazwę na closure-compiler.jar i umieść w katalogu.

Sprawdź, czy środowisko wykonawcze Java może uruchomić kompilator, uruchamiając w wierszu poleceń:

java -jar closure-compiler.jar --version

Płyta grzewcza

Najpierw utwórz plik HTML, który definiuje minimalną wersję narzędzia Blockly, oraz element div, do którego chcesz je wstawić. Aby to zrobić, utwórz w katalogu plik o nazwie index.html, który zawiera ten kod:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.js"></script>
  <script src="../msg/js/en.js"></script>
</head>
<body>
  <h1>Blockly: Advanced Compilation</h1>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
</body>
</html>

Pamiętaj, aby odpowiednio zmodyfikować ścieżkę języka (../msg/js/en.js) zgodnie ze ścieżką do Blockly i wybranym językiem.

Następnie utwórz plik JavaScript, który wczytuje Blockly i wyświetla potrzebne komunikaty lub definicji bloków, a następnie wstrzykuje Blockly do podanego elementu div. Aby to zrobić, utwórz w katalogu plik o nazwie main.js zawierający ten kod:

goog.provide('Main');
// Core
goog.require('Blockly.requires');
// Blocks
goog.require('Blockly.Constants.Logic');
goog.require('Blockly.Constants.Loops');
goog.require('Blockly.Constants.Math');
goog.require('Blockly.Constants.Text');

Main.init = function() {
  Blockly.inject('blocklyDiv', {
    'toolbox': document.getElementById('toolbox')
  });
};
window.addEventListener('load', Main.init);

Compile

Kompiluj biblioteki main.js, Blockly i Closure, uruchamiając Kompilator Closure z poziomu wiersza poleceń:

java -jar closure-compiler.jar --js='main.js' \
  --js='../blocks/**.js' \
  --js='../core/**.js' \
  --js='../generators/**.js' \
  --generate_exports \
  --externs ../externs/svg-externs.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --dependency_mode=PRUNE --entry_point=Main \
  --js_output_file main_compressed.js

Można też skorzystać ze skryptu kompilacji zaawansowanej:

 npm run test:compile:advanced

Otwórz przeglądarkę na stronie index.html, aby sprawdzić, czy wszystko działa.

Jeszcze bardziej zaawansowane

Aby jeszcze bardziej zmniejszyć rozmiar, możesz dołączyć tylko komponenty Blockly których faktycznie używa Twoja aplikacja. Jeśli na przykład aplikacja nie jest skonfigurowana tak, aby mieć kosz, możesz usunąć go z listy kompilowanych komponentów. Aby to zrobić, usuń z kodu wymóg dotyczący funkcji Blockly.requires:

// Core
goog.require('Blockly.requires');

Zamiast tego otwórz plik core/requires.js i skopiuj do kodu wszystkie instrukcje require. Następnie możesz skomentować te, których nie potrzebujesz.

Pamiętaj, że narzędzie Closure Compiler zachowuje licencje w skompilowanych danych wyjściowych. Możesz usunąć licencje Apache Google z tego pliku wyjściowego, aby zmniejszyć rozmiar.

Kompilator Closure ma wiele funkcji i opcji. Zapoznaj się z dokumentacją.