تجميع متقدّم

تستخدِم عملية الإنشاء العادية مُجمِّع JavaScript على الإنترنت من Google لتقليل حجم Blockly إلى ستة ملفات تبلغ مساحتها الإجمالية حوالي 720 كيلوبايت (160 كيلوبايت مضغوط). ويمكن بدلاً من ذلك استخدام محول JavaScript بلا اتصال من Google في "مجموعة متقدمة" الذي يتمتع بعدد من المزايا:

  • تم تقليل إجمالي حجم 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 وباللغة التي تريدها.

ثانيًا، أنشئ ملف 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);

Compile

يمكنك تجميع main.js وBlockly وClosure Library معًا من خلال تشغيل Closure Compiler من سطر الأوامر:

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 يحفظ التراخيص في الناتج المجمَّع. يمكنك إزالة تراخيص Apache من Google من ملف الإخراج هذا لتقليل حجمه بشكلٍ أكبر.

يحتوي مؤلف Closure Compiler على الكثير من الميزات والخيارات، ويمكنك الاطلاع على المستندات.