Il normale processo 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, è possibile utilizzare il compilatore JavaScript offline di Google in modalità di "compilazione avanzata", che presenta una serie di vantaggi:
- Dimensione totale di Blockly ridotta a 300 kB (100 kB compressi) a causa dell'agitazione degli alberi.
- Tempi di compilazione più rapidi e nessun traffico di rete grazie all'esecuzione del compilatore locale.
- Compilation illimitate (il compilatore online è a numero limitato).
Configurazione
Ai fini di questo tutorial minimo, inizia creando una nuova directory nella directory root di Blockly.
Scarica il compilatore di chiusura.
Scarica compiler.jar, rinominalo in closure-compiler.jar e posizionalo nella directory.
Verifica che Java Runtime Environment sia in grado di eseguire il compilatore eseguendo questo comando nella riga di comando:
java -jar closure-compiler.jar --version
Piastra caldaia
Innanzitutto, crea un file HTML che definisca una casella degli strumenti Blockly minima e un div
in cui inserirla. Per farlo, crea nella tua directory index.html un file 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) come richiesto per il percorso verso Blockly e per la lingua desiderata.
Successivamente, crea un file JavaScript che carichi Blockly e tutti i file dei messaggi
o le definizioni dei blocchi necessari, quindi inietta Blockly nel div fornito.
Per farlo, crea nella tua directory main.js un file 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 main.js, Blockly e Closure Library eseguendo il Compilatore Closure 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
Oppure utilizzando il nostro script di compilazione avanzato:
npm run test:compile:advanced
Punta un browser su index.html per verificare che tutto abbia funzionato.
Ancora più avanzato
Per riduzioni ancora maggiori delle dimensioni, puoi includere solo i componenti Blockly effettivamente utilizzati dall'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 obbligatorie nel
codice. Puoi quindi commentare quelle che non ti servono.
Tieni presente che il compilatore Closure conserva le licenze nell'output compilato. Per ridurre ulteriormente le dimensioni, puoi eliminare le licenze Apache di Google da questo file di output.
Il compilatore Closure ha molte funzionalità e opzioni. Consulta la relativa documentazione.