ปลั๊กอิน

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

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

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

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

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

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

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

ไปที่ปลั๊กอินและตัวอย่างของ Blockly ซึ่งมีตัวอย่างการใช้งานปลั๊กอินของบุคคลที่หนึ่งแบบเรียลไทม์
ค้นหา npm สำหรับ keyword:blockly-plugin ปลั๊กอินที่มีขอบเขต @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

นําเข้าโค้ดจากปลั๊กอิน วิธีการจะขึ้นอยู่กับวิธีติดตั้งปลั๊กอิน
npm หรือ yarn
```
import Blockly from 'blockly';
import {registerFieldAngle} from '@blockly/field-angle';
```
unpkg
คุณไม่จำเป็นต้องใช้คำสั่ง import
ที่เก็บที่โคลน
```
import {registerFieldAngle} from 'path/to/plugin';
```
เริ่มต้นใช้งานปลั๊กอินตามต้องการ ปลั๊กอินที่มีช่องที่กำหนดเองมักจะกำหนดให้คุณต้องลงทะเบียนช่องดังกล่าว
```
registerFieldAngle();
```

ใช้ปลั๊กอิน

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 ใช้การกำหนดเวอร์ชันแบบเชิงความหมาย ซึ่งกำหนดให้ต้องใช้การเปลี่ยนแปลงที่ทำให้เกิดข้อจำกัดในการใช้งานกับเวอร์ชันหลักใหม่ ปลั๊กอินใหม่ที่ใช้การแพตช์ด้วย Monkey กับโค้ดหลักจะมีเวอร์ชันหลักเป็น 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 เป็นเวอร์ชันใหม่ คุณควรตรวจสอบว่าปลั๊กอินใดอัปเดตเป็นเวอร์ชันหลักใหม่ได้บ้าง

ปลั๊กอิน จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ