Trình bổ trợ

Trình bổ trợ là một đoạn mã độc lập giúp bổ sung chức năng cho Blockly. Ví dụ: nó có thể thêm một trường tuỳ chỉnh, xác định một giao diện mới hoặc cung cấp một trình kết xuất tuỳ chỉnh. Các trình bổ trợ thường được đóng gói và phân phối thông qua npm.

Để xem phần giới thiệu nhanh về trình bổ trợ, hãy xem bài nói Tổng quan về trình bổ trợ (2021) của chúng tôi.

Nếu bạn muốn tạo trình bổ trợ của riêng mình, hãy xem phần Thêm trình bổ trợ.

Trình bổ trợ của bên thứ nhất và bên thứ ba

Các trình bổ trợ của bên thứ nhất được nhóm Blockly hỗ trợ và xuất bản trong phạm vi @blockly trên npm. Chúng được thiết kế để có thể sử dụng trong nhiều ứng dụng Blockly.

Trình bổ trợ của bên thứ ba được duy trì và xuất bản độc lập. Chúng có thể phức tạp hơn, mang tính thử nghiệm hơn hoặc nhắm đến một phạm vi hẹp hơn của các ứng dụng Blockly.

Tìm một trình bổ trợ

  • Truy cập vào Blockly Plugins & Demos (Các trình bổ trợ và bản minh hoạ của Blockly) để xem các bản minh hoạ trực tiếp về trình bổ trợ của bên thứ nhất.

  • Tìm kiếm keyword:blockly-plugin trên npm. Các trình bổ trợ có phạm vi @blockly do nhóm Blockly xuất bản. Để có kết quả rộng hơn, hãy tìm kiếm keyword:blockly hoặc blockly.

  • Hãy xem thư mục blockly-samples/plugins trên GitHub. Đây là kho lưu trữ cho các trình bổ trợ bên thứ nhất. Mỗi trình bổ trợ đều có một tệp README mô tả hành vi và mục đích sử dụng của trình bổ trợ đó.

Cài đặt trình bổ trợ

Bạn nên cài đặt các trình bổ trợ bằng một trình quản lý gói như npm hoặc yarn. Nhờ đó, bạn có thể dễ dàng nhận được thông tin cập nhật.

  • Cài đặt trình bổ trợ bằng trình quản lý gói

    npm

    npm install @blockly/field-angle

    chỉ len

    yarn add @blockly/field-angle

  • Cài đặt một trình bổ trợ mà không cần trình quản lý gói

    unpkg

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

    Bạn cũng có thể sao chép kho lưu trữ GitHub chứa trình bổ trợ này. Đối với trình bổ trợ của bên thứ nhất, đây là blockly-samples.

Kiểm tra tệp README của trình bổ trợ để xem có hướng dẫn cài đặt bổ sung nào không.

Sử dụng trình bổ trợ

Mỗi trình bổ trợ đều khác nhau, vì vậy, hãy xem tệp README của trình bổ trợ để biết thông tin về cách sử dụng trình bổ trợ đó. Ví dụ sau đây cho thấy cách sử dụng trình bổ trợ @blockly/field-angle:

  1. Nhập mã từ trình bổ trợ. Cách thực hiện việc này tuỳ thuộc vào cách bạn cài đặt trình bổ trợ.

    npm hoặc yarn

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

    unpkg

    Bạn không cần sử dụng câu lệnh import.

    Kho lưu trữ được sao chép

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

  2. Khởi chạy trình bổ trợ nếu cần. Các trình bổ trợ cung cấp trường tuỳ chỉnh thường yêu cầu bạn đăng ký trường:

    registerFieldAngle();

  3. Sử dụng trình bổ trợ.

    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'
  },
]);

    Một trường để chọn góc từ mặt số 360 độ.

Phiên bản trình bổ trợ

Các trình bổ trợ trong blockly-samples sử dụng định nghĩa phiên bản ngữ nghĩa, yêu cầu các thay đổi có thể gây lỗi phải sử dụng một phiên bản lớn mới. Mọi trình bổ trợ mới vá lõi sẽ có phiên bản lớn là 0 để biểu thị quá trình phát triển ban đầu.

Hầu hết các trình bổ trợ đều bao gồm gói blockly dưới dạng peerDependency thay vì dependency. Điều này là do chúng tôi giả định rằng bạn đã cài đặt Blockly. (Không có lý do gì để sử dụng một trình bổ trợ mà không dùng Blockly.) Điều này cho phép bạn tự quản lý phiên bản Blockly, nhưng cũng yêu cầu bạn kiểm tra package.json của trình bổ trợ để xác định phiên bản tối thiểu của Blockly mà trình bổ trợ yêu cầu. Nếu một trình bổ trợ được cập nhật để cần một phiên bản Blockly mới hơn, thì đây được coi là một thay đổi có thể gây lỗi và phiên bản lớn của trình bổ trợ đó sẽ tăng lên.

Khi bạn thêm một trình bổ trợ vào package.json của ứng dụng, theo mặc định, bạn sẽ thêm dấu mũ trước phiên bản:

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

Thao tác này sẽ cho phép npm cài đặt mọi phiên bản nhỏ bằng hoặc cao hơn phiên bản được liệt kê, vì vậy, phiên bản 5.0.20 hoặc 5.1.0 đều hoạt động, nhưng phiên bản lớn mới như 6.0.1 thì không. Khi cập nhật lên phiên bản Blockly mới, bạn nên kiểm tra xem có thể cập nhật bất kỳ trình bổ trợ nào của mình lên phiên bản lớn mới hay không.