बिल्ड करने की सामान्य प्रोसेस में, Google के ऑनलाइन JavaScript कंपाइलर का इस्तेमाल किया जाता है. इससे Blockly को छह फ़ाइलों में कम किया जा सकता है. इनका कुल साइज़ करीब 720 केबी (ज़िप की गई फ़ाइल का साइज़ 160 केबी) होता है. इसके अलावा, Google के ऑफ़लाइन JavaScript कंपाइलर का इस्तेमाल "ऐडवांस कंपाइलेशन" मोड में किया जा सकता है. इसके कई फ़ायदे हैं:
- ट्री शेकिंग की वजह से, Blockly का कुल साइज़ 300 केबी (ज़िप किया गया 100 केबी) तक कम हो गया है.
- लोकल कंपाइलर के इस्तेमाल से, ऐप्लिकेशन को तेज़ी से बनाया जा सकता है. साथ ही, नेटवर्क ट्रैफ़िक भी नहीं होता.
- अनलिमिटेड कंपाइलेशन (ऑनलाइन कंपाइलर के लिए, दर की सीमा तय की गई है).
सेटअप
इस छोटे ट्यूटोरियल के लिए, Blockly की रूट डायरेक्ट्री में एक नई डायरेक्ट्री बनाकर शुरू करें.
Closure Compiler डाउनलोड करें.
compiler.jar को डाउनलोड करें, उसका नाम बदलकर closure-compiler.jar करें, और उसे अपनी डायरेक्ट्री में रखें.
पुष्टि करें कि आपका Java Runtime Environment, कंपाइलर को चला सकता है. इसके लिए, कमांड लाइन पर यह निर्देश चलाएं:
java -jar closure-compiler.jar --version
बॉयलर प्लेट
सबसे पहले, एक एचटीएमएल फ़ाइल बनाएं. इसमें कम से कम Blockly टूलबॉक्स और div को इंजेक्ट करने के लिए एक एलिमेंट तय किया गया हो. इसके लिए, अपनी डायरेक्ट्री में index.html नाम की एक फ़ाइल बनाएं. इसमें यह कोड शामिल करें:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly: Advanced Compilation</title>
<script src="main_compressed.js"></script>
<script src="../msg/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>
Blockly के पाथ और अपनी पसंद की भाषा के लिए, भाषा के पाथ (../msg/en.js) में ज़रूरत के हिसाब से बदलाव करना न भूलें.
इसके बाद, एक JavaScript फ़ाइल बनाएं. यह फ़ाइल Blockly और ज़रूरी मैसेज फ़ाइलों या ब्लॉक डेफ़िनिशन को लोड करती है. इसके बाद, Blockly को दिए गए div में इंजेक्ट करती है.
इसके लिए, अपनी डायरेक्ट्री में main.js नाम की एक फ़ाइल बनाएं. इसमें यह कोड शामिल करें:
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);
संकलित करें
कमांड लाइन से Closure Compiler चलाकर, main.js, Blockly, और Closure Library को एक साथ कंपाइल करें:
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
इसके अलावा, हमारी ऐडवांस कंपाइलेशन स्क्रिप्ट का इस्तेमाल करके भी ऐसा किया जा सकता है:
npm run test:compile:advanced
यह पुष्टि करने के लिए कि सब कुछ सही तरीके से काम कर रहा है, ब्राउज़र को index.html पर ले जाएं.
और भी ज़्यादा ऐडवांस
आकार को और भी कम करने के लिए, सिर्फ़ उन Blockly कॉम्पोनेंट को शामिल किया जा सकता है जिनका इस्तेमाल आपका ऐप्लिकेशन करता है. उदाहरण के लिए, अगर आपके ऐप्लिकेशन में ट्रैश की सुविधा कॉन्फ़िगर नहीं की गई है, तो कंपाइल किए गए कॉम्पोनेंट की सूची से ट्रैश को हटाया जा सकता है. इसके लिए, अपने कोड से Blockly.requires की ज़रूरत को हटाएं:
// Core
goog.require('Blockly.requires');
इसके बजाय, core/requires.js खोलें और ज़रूरी सभी स्टेटमेंट को अपने कोड में कॉपी करें. इसके बाद, जिन फ़ील्ड की ज़रूरत नहीं है उन्हें कमेंट आउट किया जा सकता है.
ध्यान दें कि Closure Compiler, कंपाइल किए गए आउटपुट में लाइसेंस सुरक्षित रखता है. इस आउटपुट फ़ाइल से Google के Apache लाइसेंस हटाने के लिए स्वतंत्र महसूस करें, ताकि इसका साइज़ और कम किया जा सके.
Closure Compiler में कई सुविधाएं और विकल्प मौजूद हैं. इनके बारे में जानने के लिए, दस्तावेज़ देखें.