উন্নত সংকলন

নিয়মিত বিল্ড প্রক্রিয়াটি ব্লকলিকে প্রায় 720kb (160kb zipped) মোট দেড় ডজন ফাইলে কমাতে Google এর অনলাইন জাভাস্ক্রিপ্ট কম্পাইলার ব্যবহার করে। বিকল্পভাবে কেউ "উন্নত সংকলন" মোডে Google এর অফলাইন জাভাস্ক্রিপ্ট কম্পাইলার ব্যবহার করতে পারেন যার অনেকগুলি সুবিধা রয়েছে:

গাছ কাঁপানোর কারণে মোট ব্লকলি আকার 300kb (100kb zipped) এ কমে গেছে।
স্থানীয় কম্পাইলার এক্সিকিউশনের কারণে দ্রুত বিল্ড টাইম এবং নেটওয়ার্ক ট্রাফিক নেই।
সীমাহীন সংকলন (অনলাইন কম্পাইলার হার-সীমিত)।

সেটআপ

এই ন্যূনতম টিউটোরিয়ালের উদ্দেশ্যে, ব্লকলি রুট ডিরেক্টরিতে একটি নতুন ডিরেক্টরি তৈরি করে শুরু করুন।

ক্লোজার কম্পাইলার ডাউনলোড করুন।

compiler.jar ডাউনলোড করুন, এটির নাম পরিবর্তন করুন closure-compiler.jar , এবং এটি আপনার ডিরেক্টরিতে রাখুন।

আপনার জাভা রানটাইম এনভায়রনমেন্ট কমান্ড লাইনে এটি চালিয়ে কম্পাইলার চালাতে পারে তা যাচাই করুন:

java -jar closure-compiler.jar --version

বয়লার প্লেট

প্রথমে একটি এইচটিএমএল ফাইল তৈরি করুন যা একটি ন্যূনতম ব্লকলি টুলবক্স এবং একটি ডিভ যাতে এটি ইনজেক্ট করতে হয়। এটি করার জন্য, index.html নামে আপনার ডিরেক্টরিতে একটি ফাইল তৈরি করুন যাতে এই কোডটি রয়েছে:

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

ব্লকলিতে আপনার পাথ এবং আপনার কাঙ্খিত ভাষার জন্য প্রয়োজনীয় ভাষা পাথ ( ../msg/js/en.js ) সম্পাদনা করতে ভুলবেন না।

দ্বিতীয়ত, একটি JavaScript ফাইল তৈরি করুন যা Blockly এবং যেকোন প্রয়োজনীয় বার্তা ফাইল বা ব্লক সংজ্ঞা লোড করে, তারপর Blockly প্রদত্ত ডিভিতে ইনজেক্ট করে। এটি করার জন্য, আপনার ডিরেক্টরিতে 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);

কম্পাইল

কমান্ড লাইন থেকে ক্লোজার কম্পাইলার চালিয়ে main.js , ব্লকলি এবং ক্লোজার লাইব্রেরি একসাথে কম্পাইল করুন:

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.requires এর প্রয়োজনীয়তা মুছে ফেলুন:

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

এর জায়গায়, core/requires.js খুলুন এবং আপনার কোডে প্রয়োজনীয় সমস্ত বিবৃতি কপি করুন। আপনি তারপর আপনার প্রয়োজন নেই বেশী মন্তব্য করতে পারেন.

উল্লেখ্য যে ক্লোজার কম্পাইলার কম্পাইল করা আউটপুটে লাইসেন্স সংরক্ষণ করে। আকার আরও কমাতে এই আউটপুট ফাইল থেকে Google-এর Apache লাইসেন্সগুলিকে বিনা দ্বিধায় সরিয়ে ফেলুন৷

ক্লোজার কম্পাইলারের অনেকগুলি বৈশিষ্ট্য এবং বিকল্প রয়েছে, তাদের ডকুমেন্টেশন পরীক্ষা করে দেখুন।