التجميع المتقدّم

تستخدم عملية الإنشاء العادية برنامج تجميع 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/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/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 وانسخ جميع عبارات require إلى الرمز البرمجي. يمكنك بعد ذلك إيقاف تلك التي لا تحتاج إليها.

يُرجى العِلم أنّ Closure Compiler يحتفظ بالتراخيص في الناتج المُجمَّع. يمكنك إزالة تراخيص Apache الخاصة بشركة Google من ملف الإخراج هذا لتقليل حجمه بشكل أكبر.

تتضمّن أداة Closure Compiler الكثير من الميزات والخيارات، لذا ننصحك بالاطّلاع على المستندات الخاصة بها.