דף זה תורגם על ידי Cloud Translation API.

אוסף מתקדם

תהליך ה-build הרגיל משתמש במהדר ה-JavaScript של Google באינטרנט כדי להפחית את blockly לחצי תריסר קבצים שגודלם הכולל הוא כ-720kb (160kb דחוסים). לחלופין, ניתן להשתמש בהידור ה-JavaScript הלא מקוון של Google במצב "הידור מתקדם", שמציע מספר יתרונות:

הגודל הכולל של Blockly הופחת ל-300kb (או 100kb לאחר כיווץ) עקב רעידת העצים.
זמני build מהירים יותר וללא תעבורת נתונים ברשת עקב ביצוע מהדר מקומי.
אוספים ללא הגבלה (הידור באינטרנט מוגבל בקצב).

Setup (הגדרה)

כדי להיעזר במדריך המינימלי הזה, צריך ליצור ספרייה חדשה בספריית השורש שלBlockly.

מורידים מהדר סגירה.

מורידים את הקובץ 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 שטוען את כל קובצי ההודעות הדרושים או את ההגדרות של חסימת ההגדרות, ולאחר מכן מחדיר את החסימה ל-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 וספריית החסימות ביחד, מריצים את מהדר החסימות משורת הפקודה:

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 ומעתיקים את כל ההצהרות הנדרשות לקוד. לאחר מכן תוכלו להוסיף הערות לגבי הצורך.

חשוב לשים לב: 'מהדר החסימות' שומר רישיונות בפלט ההידור. אפשר להסיר את רישיונות Apache של Google מקובץ הפלט הזה כדי להקטין עוד יותר.

מהדר החסימות כולל הרבה פיצ'רים ואפשרויות. מומלץ לעיין בתיעוד שלהם.