ปลั๊กอิน

ปลั๊กอินคือโค้ดที่ทำงานได้ด้วยตัวเองซึ่งเพิ่มฟังก์ชันการทำงานให้กับ Blockly เช่น อาจเพิ่มช่องที่กำหนดเอง กำหนดธีมใหม่ หรือมีตัวแสดงผลที่กำหนดเอง โดยทั่วไปแล้ว ปลั๊กอินจะบรรจุและเผยแพร่ผ่าน npm

หากต้องการดูข้อมูลเบื้องต้นเกี่ยวกับปลั๊กอินอย่างรวดเร็ว โปรดดูการบรรยายภาพรวมของปลั๊กอิน (2021)

หากต้องการสร้างปลั๊กอินของคุณเอง โปรดดูเพิ่ม ปลั๊กอิน

ปลั๊กอินของบุคคลที่หนึ่งและบุคคลที่สาม

ปลั๊กอินของบุคคลที่หนึ่งได้รับการสนับสนุนจากทีม Blockly และเผยแพร่ภายใต้ขอบเขต @blockly ใน npm โดยออกแบบมาให้ใช้งานได้ในแอปพลิเคชัน Blockly ที่หลากหลาย

ปลั๊กอินของบุคคลที่สามได้รับการดูแลและเผยแพร่โดยอิสระ ซึ่งอาจซับซ้อนกว่า เป็นแบบทดลองมากกว่า หรือกำหนดเป้าหมายไปยังแอปพลิเคชัน Blockly ที่แคบลง

ค้นหาปลั๊กอิน

  • ไปที่ ปลั๊กอินและ เดโมของ Blockly ซึ่งมี เดโมแบบสดของปลั๊กอินของบุคคลที่หนึ่ง

  • ค้นหา keyword:blockly-pluginใน npm ปลั๊กอินที่มีขอบเขต @blockly ได้รับการเผยแพร่โดยทีม Blockly หากต้องการผลลัพธ์ที่กว้างขึ้น ให้ค้นหา keyword:blockly หรือ blockly

  • ดู blockly-samples/plugins ไดเรกทอรี ใน GitHub ซึ่งเป็นที่เก็บสำหรับปลั๊กอินของบุคคลที่หนึ่ง ปลั๊กอินแต่ละรายการมีไฟล์ README ที่อธิบายลักษณะการทำงานและการใช้งานที่ต้องการ

ติดตั้งปลั๊กอิน

เราขอแนะนำให้ติดตั้งปลั๊กอินด้วยเครื่องมือจัดการแพ็กเกจ เช่น npm หรือ yarn ซึ่งจะช่วยให้คุณรับการอัปเดตได้ง่าย

  • ติดตั้งปลั๊กอินด้วยเครื่องมือจัดการแพ็กเกจ

    npm

    npm install @blockly/field-angle

    ไหมพรม

    yarn add @blockly/field-angle

  • ติดตั้งปลั๊กอินโดยไม่ใช้เครื่องมือจัดการแพ็กเกจ

    unpkg

    <script src="https://unpkg.com/@blockly/field-angle"></script>

    นอกจากนี้ คุณยังโคลนที่เก็บ GitHub ที่มีปลั๊กอินได้ด้วย สำหรับ ปลั๊กอินของบุคคลที่หนึ่ง ที่เก็บดังกล่าวคือ blockly-samples

ตรวจสอบไฟล์ README ของปลั๊กอินเพื่อดูว่ามีวิธีการติดตั้งเพิ่มเติมหรือไม่

ใช้ปลั๊กอิน

ปลั๊กอินแต่ละรายการจะแตกต่างกัน ดังนั้นโปรดดูไฟล์ README ของปลั๊กอินเพื่อดูข้อมูลเกี่ยวกับวิธีใช้ปลั๊กอินนั้น ตัวอย่างต่อไปนี้แสดงวิธีใช้ปลั๊กอิน @blockly/field-angle

  1. นำเข้าโค้ดจากปลั๊กอิน วิธีดำเนินการจะขึ้นอยู่กับวิธีที่คุณติดตั้งปลั๊กอิน

    npm หรือ yarn

    import Blockly from 'blockly';
import {registerFieldAngle} from '@blockly/field-angle';

    unpkg

    คุณไม่จำเป็นต้องใช้คำสั่ง import

    ที่เก็บที่โคลน

    import {registerFieldAngle} from 'path/to/plugin';

  2. เริ่มต้นปลั๊กอินตามต้องการ ปลั๊กอินที่ให้ช่องที่กำหนดเองมักกำหนดให้คุณต้องลงทะเบียนช่อง

    registerFieldAngle();

  3. ใช้ปลั๊กอิน

    Blockly.common.defineBlocksWithJsonArray([
  {
    type: "my_angle_block",
    message0: "%1 degrees",
    args0: [
      {
        // Use @blockly/field-angle.
        type: "field_angle",
        name: "FIELDNAME",
        value: 45,
      },
    ],
    output: null,
    style: 'math_blocks'
  },
]);

    ฟิลด์สำหรับเลือกมุมจากวงกลม 360 องศา

เวอร์ชันปลั๊กอิน

ปลั๊กอินใน blockly-samples ใช้ การกำหนดเวอร์ชันแบบ Semantic, ซึ่งกำหนดให้ต้องมีการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบเพื่อใช้เวอร์ชันหลักใหม่ ปลั๊กอินใหม่ใดก็ตามที่ monkey patch core จะมีเวอร์ชันหลักเป็น 0 เพื่อแสดงถึงการพัฒนาเริ่มต้น

ปลั๊กอินส่วนใหญ่มีแพ็กเกจ blockly เป็น peerDependency แทนที่จะเป็น dependency เนื่องจากเราถือว่าคุณได้ติดตั้ง Blockly ไว้แล้ว (การใช้ปลั๊กอินโดยไม่ใช้ Blockly นั้นไม่สมเหตุสมผล) วิธีนี้ช่วยให้คุณจัดการเวอร์ชัน Blockly ได้ด้วยตนเอง แต่ยังกำหนดให้คุณต้องตรวจสอบ package.json ของปลั๊กอินเพื่อกำหนดเวอร์ชันขั้นต่ำของ Blockly ที่จำเป็น หากมีการอัปเดตปลั๊กอินให้ต้องใช้ Blockly เวอร์ชันใหม่กว่า ระบบจะถือว่าเป็นการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบและจะเพิ่มเวอร์ชันหลัก

เมื่อคุณเพิ่มปลั๊กอินลงใน package.json ของแอปพลิเคชัน ค่าเริ่มต้นคือการใส่เครื่องหมายแคเร็ตก่อนเวอร์ชัน

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

ซึ่งจะช่วยให้ npm ติดตั้งเวอร์ชันย่อยใดก็ได้ที่เท่ากับหรือสูงกว่าเวอร์ชันที่ระบุไว้ ดังนั้นเวอร์ชัน 5.0.20 หรือ 5.1.0 จึงใช้งานได้ แต่เวอร์ชันหลักใหม่ เช่น 6.0.1 จะใช้งานไม่ได้ เมื่ออัปเดตเป็น Blockly เวอร์ชันใหม่ คุณควรตรวจสอบว่าปลั๊กอินใดบ้างที่อัปเดตเป็นเวอร์ชันหลักใหม่ได้ด้วย