Normal oluşturma işlemi, Blockly'yi toplamda yaklaşık 720 kb (160 kb sıkıştırılmış) yarım düzine dosyaya indirmek için Google'ın çevrimiçi JavaScript derleyicisini kullanır. Alternatif olarak, Google'ın çevrimdışı JavaScript derleyicisi, "gelişmiş derleme" modunda kullanılabilir. Bu mod birçok avantaj sağlar:
- Ağaç sallantısı nedeniyle toplam Blockly boyutu 300 kb'a (100 kb sıkıştırılmış) düşürüldü.
- Yerel derleyicinin yürütmesi nedeniyle daha kısa derleme süreleri ve ağ trafiği olmaması.
- Sınırsız derlemeler (online derleyicinin oranı sınırlıdır).
Kurulum
Bu minimal eğitimin amaçları için Blockly kök dizininde yeni bir dizin oluşturarak başlayın.
Closure Derleyiciyi indirin.
compiler.jar dosyasını indirin, dosyayı closure-compiler.jar olarak yeniden adlandırın ve dizininize yerleştirin.
Java Runtime Environment'ın derleyiciyi çalıştırabildiğini doğrulamak için komut satırında şunu çalıştırın:
java -jar closure-compiler.jar --version
Kazan Plakası
Öncelikle, en küçük Engellemeli araç kutusunu ve bunun yerleştirileceği bir div öğesini tanımlayan bir HTML dosyası oluşturun. Bunun için dizininizde index.html adlı, şu kodu içeren bir dosya oluşturun:
<!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>
Dil yolunu (../msg/js/en.js) Blockly yolunuz ve istediğiniz dil için gerektiği gibi düzenlediğinizden emin olun.
Ardından, Blockly'yi ve gerekli mesaj dosyalarını veya engelleme tanımlarını yükleyen bir JavaScript dosyası oluşturun. Ardından, sağlanan div öğesine Blockly'yi ekleyin. Bunun için dizininizde main.js adlı, şu kodu içeren bir dosya oluşturun:
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
Komut satırından Closure Derleyici'yi çalıştırarak main.js, Blockly ve Closure Library'yi birlikte derleyin:
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
Veya gelişmiş derleme komut dosyamızı kullanarak:
npm run test:compile:advanced
Her şeyin çalıştığını doğrulamak için tarayıcıyı index.html adresine yönlendirin.
Daha İleri Düzey
Boyutta daha da fazla küçültmek için yalnızca uygulamanızın gerçekten kullandığı Blockly bileşenlerini ekleyebilirsiniz. Örneğin, uygulamanız bir çöp kutusu içerecek şekilde yapılandırılmamışsa çöp kutusunu derlenen bileşen listesinden kaldırabilirsiniz. Bunu yapmak için Blockly.requires şartını kodunuzdan silin:
// Core
goog.require('Blockly.requires');
Bunun yerine core/requires.js dosyasını açın ve gerekli tüm ifadeleri kodunuza kopyalayın. İhtiyaç duymadığınız yorumları yazabilirsiniz.
Closure Derleyici'nin, derlenen çıkışta lisansları koruduğunu unutmayın. Boyutu küçültmek için Google'ın Apache lisanslarını bu çıkış dosyasından kaldırabilirsiniz.
Closure Derleyici'de pek çok özellik ve seçenek var, belgelerine göz atın.