Compilation avanzata

La normale procedura di compilazione utilizza il compilatore JavaScript online di Google per ridurre Blockly a una mezza dozzina di file per un totale di circa 720 KB (160 KB compressi). In alternativa, puoi utilizzare il compilatore JavaScript offline di Google in modalità "compilazione avanzata", che presenta diversi vantaggi:

  • Dimensione totale di Blockly ridotta a 300 kB (100 kB compressi) a causa dell'oscillazione degli alberi.
  • Tempi di compilazione più rapidi e assenza di traffico di rete grazie all'esecuzione del compilatore locale.
  • Compilation illimitate (il compilatore online è soggetto a limiti di frequenza).

Configurazione

Ai fini di questo tutorial minimo, inizia creando una nuova directory nella directory root di Blockly.

Compilatore chiusura download.

Scarica compiler.jar, rinominalo in closure-compiler.jar e inseriscilo nella tua directory.

Verifica che il tuo Java Runtime Environment possa eseguire il compilatore eseguendo questo nella riga di comando:

java -jar closure-compiler.jar --version

Boilerplate

Innanzitutto, crea un file HTML che definisce una cassetta degli attrezzi Blockly minima e un div in cui inserirla. A tale scopo, crea un file nella tua directory denominato index.html contenente questo codice:

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

Assicurati di modificare il percorso della lingua (../msg/js/en.js) in base alle tue esigenze per il percorso a Blockly e per la lingua che preferisci.

In secondo luogo, crea un file JavaScript che carichi Blockly e gli eventuali file di messaggi o definizioni di blocchi necessari, quindi inserisci Blockly nel div fornito. Per farlo, crea un file nella tua directory denominato main.js contenente questo codice:

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);

Compila

Compila insieme main.js, Blockly e Closure Library eseguendo Chiusura compilatore dalla riga di comando:

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

In alternativa, puoi utilizzare il nostro script di compilazione avanzato:

 npm run test:compile:advanced

Apri un browser e vai alla pagina index.html per verificare che tutto funzioni.

Ancora più avanzato

Per riduzioni ancora maggiori, puoi includere solo i componenti Blockly effettivamente utilizzati dalla tua applicazione. Ad esempio, se la tua applicazione non è configurata per avere un cestino, puoi rimuoverlo dall'elenco dei componenti compilati. Per farlo, elimina il requisito per Blockly.requires dal codice:

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

Al suo posto, apri core/requires.js e copia tutte le istruzioni della richiesta in il tuo codice. Puoi quindi commentare quelle che non ti servono.

Tieni presente che Closure Compiler conserva le licenze nell'output compilato. Non esitare a rimuovere le licenze Apache di Google da questo file di output per ridurre ulteriormente le dimensioni.

Closure Compiler offre molte funzionalità e opzioni. Consulta la relativa documentazione.