İleri Derleme

Normal derleme işlemi, Google'ın çevrimiçi JavaScript derleyicisini kullanarak Blockly'yi toplamda yaklaşık 720 KB (160 kb'lik sıkıştırılmış) yarım düzine dosyaya indirir. Alternatif olarak "gelişmiş derleme"de Google'ın çevrimdışı JavaScript derleyicisi kullanılabilir modudur. Bu modun bazı avantajları vardır:

  • Ağaç sallama nedeniyle toplam Blockly boyutu 300 KB'a (sıkıştırılmış 100 KB) düşürüldü.
  • Yerel derleyici çalıştırması sayesinde daha hızlı derleme süreleri ve ağ trafiği olmaması.
  • Sınırsız derleme (online derleyici hız sınırlıdır).

Kurulum

Bu asgari eğitim için öncelikle Blockly kök dizininde yeni bir dizin oluşturun.

Closure Compiler'ı indirin.

compiler.jar dosyasını indirin, closure-compiler.jar olarak yeniden adlandırın ve dizininize yerleştirin.

Java Çalışma Zamanı Ortamınızın derleyiciyi çalıştırıp çalıştırmadığını doğrulamak için komut satırında şunu çalıştırın:

java -jar closure-compiler.jar --version

Kazan plakası

İlk olarak, minimal bir Blockly araç kutusunu ve bir div öğesi tanımlayan bir HTML dosyası oluşturun yerleştirileceğiniz. Bunu yapmak için dizininizde index.html adlı ve aşağıdaki 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.

İkinci olarak, Blockly'yi ve gerekli mesaj dosyalarını veya blok tanımlarını yükleyip ardından Blockly'yi sağlanan div'e enjekte eden bir JavaScript dosyası oluşturun. Bunu yapmak için dizininizde main.js adlı ve aşağıdaki 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 Compiler'ı ç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

Ya da gelişmiş derleme komut dosyamızı kullanarak:

 npm run test:compile:advanced

Her şeyin çalıştığını doğrulamak için bir tarayıcıda index.html adresine gidin.

Daha da İleri Düzey

Boyutta daha da fazla düşüş elde etmek için yalnızca uygulamanızın gerçekten kullandığı Blockly bileşenlerini ekleyebilirsiniz. Örneğin, uygulamanız çöp kutusu içerecek şekilde yapılandırılmamışsa çöp kutusunu derlenen bileşenler listesinden kaldırabilirsiniz. Bunu yapmak için kodunuzdan Blockly.requires koşulunu silin:

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

Bunun yerine core/requires.js dosyasını açın ve tüm require ifadelerini kodunuza kopyalayın. Ardından, ihtiyacınız olmayanları yorumlayabilirsiniz.

Closure Compiler'ın, derlenmiş çıkışta lisansları koruduğunu unutmayın. Boyutu daha da azaltmak için bu çıkış dosyasından Google'ın Apache lisanslarını kaldırabilirsiniz.

Closure Compiler'da birçok özellik ve seçenek var. Hemen belgeleri inceleyin.