หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

ตั้งค่า

เพื่อให้เป็นไปตามจุดประสงค์ของบทแนะนำสั้นๆ นี้ ให้เริ่มด้วยการสร้างไดเรกทอรีใหม่ในไดเรกทอรีรากของ 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 และสำหรับภาษาที่ต้องการ

ขั้นตอนที่ 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 เข้าด้วยกันโดยเรียกใช้คอมไพเลอร์การปิดจากบรรทัดคำสั่ง:

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 จะเก็บใบอนุญาตไว้ในผลลัพธ์ที่คอมไพล์แล้ว คุณสามารถตัดใบอนุญาต Apache ของ Google จากไฟล์เอาต์พุตนี้เพื่อลดขนาดได้มากขึ้น

Closure Compiler มีฟีเจอร์และตัวเลือกมากมาย โปรดดูเอกสารประกอบ