تالیف پیشرفته

فرآیند ساخت معمولی از کامپایلر آنلاین جاوا اسکریپت گوگل برای کاهش Blockly به نیم دوجین فایل در مجموع حدود 720 کیلوبایت (160 کیلوبایت فشرده) استفاده می کند. یا می‌توان از کامپایلر آفلاین جاوا اسکریپت گوگل در حالت «کامپایل پیشرفته» استفاده کرد که دارای چندین مزیت است:

  • اندازه کل Blockly به دلیل تکان دادن درخت به 300 کیلوبایت (100 کیلوبایت زیپ شده) کاهش یافت.
  • زمان ساخت سریعتر و بدون ترافیک شبکه به دلیل اجرای کامپایلر محلی.
  • کامپایل نامحدود (کامپایلر آنلاین با نرخ محدود است).

راه اندازی

برای اهداف این حداقل آموزش، با ایجاد یک دایرکتوری جدید در پوشه ریشه Blockly شروع کنید.

دانلود Closure Compiler.

compiler.jar را دانلود کنید، نام آن را به closure-compiler.jar تغییر دهید و در فهرست خود قرار دهید.

بررسی کنید که محیط اجرای Java شما می تواند کامپایلر را با اجرای این در خط فرمان اجرا کند: 

java -jar closure-compiler.jar --version

صفحه دیگ بخار

ابتدا یک فایل HTML ایجاد کنید که یک جعبه ابزار 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/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 ) را همانطور که برای مسیر خود به Blockly و برای زبان مورد نظر خود لازم است ویرایش کنید.

دوم، یک فایل جاوا اسکریپت ایجاد کنید که 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 مجوزها را در خروجی کامپایل شده حفظ می کند. به راحتی می توانید مجوزهای آپاچی گوگل را از این فایل خروجی حذف کنید تا اندازه آن کاهش یابد.

Closure Compiler دارای ویژگی ها و گزینه های زیادی است، مستندات آنها را بررسی کنید.