การรวบรวมขั้นสูง

ขั้นตอนการสร้างแบบปกติใช้คอมไพเลอร์ JavaScript ออนไลน์ของ Google ในการลด Blockly ให้เหลือไฟล์จำนวนครึ่งสิบไฟล์รวมแล้วประมาณ 720 KB (บีบอัดแล้ว 160 KB) อีกวิธีหนึ่งคือสามารถใช้คอมไพเลอร์ JavaScript แบบออฟไลน์ของ Google ใน "การคอมไพล์ขั้นสูง" ซึ่งมีข้อดีหลายประการดังนี้

  • ขนาดบล็อกทั้งหมดลดลงเหลือ 300 KB (บีบอัดแล้ว 100 KB) เนื่องจากต้นไม้สั่นสะเทือน
  • ใช้เวลาสร้างเร็วขึ้นและไม่มีการรับส่งข้อมูลในเครือข่ายเนื่องจากการเรียกใช้คอมไพเลอร์ในเครื่อง
  • การคอมไพล์ได้ไม่จำกัด (คอมไพเลอร์ออนไลน์มีขีดจำกัดอัตรา)

ตั้งค่า

บทแนะนำแบบย่อนี้เริ่มต้นด้วยการสร้างไดเรกทอรีใหม่ในไดเรกทอรีรูทของ Blockly

ดาวน์โหลด Closure Compiler

ดาวน์โหลด compiler.jar แล้วเปลี่ยนชื่อเป็น closure-compiler.jar และวางไว้ในไดเรกทอรี

ตรวจสอบว่า Java Runtime Environment สามารถเรียกใช้คอมไพเลอร์โดยการเรียกใช้ ในบรรทัดคำสั่ง:

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 และสำหรับภาษาที่คุณต้องการ

ขั้นตอนที่ 2 สร้างไฟล์ 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 มีฟีเจอร์และตัวเลือกมากมาย โปรดดูเอกสารประกอบ