Gỡ lỗi bằng các mẫu chặn và mẫu có khối

Đôi khi, khi phát triển một trình bổ trợ trong mẫu khối, bạn cần thực hiện các thay đổi tương ứng trong chính Blockly. Hầu hết các trình bổ trợ đều được thiết lập để tìm nạp Blockly từ sổ đăng ký npm, vì vậy, bạn chỉ có thể sử dụng mã đã được phát hành trên npm. Điều này sẽ khiến việc gỡ lỗi các thay đổi bằng tính năng Blockly trở nên khó khăn. Khi muốn thực hiện và kiểm thử các thay đổi trong cả mẫu khối và mẫu theo khối, bạn có thể dùng bất kỳ phương thức nào dưới đây để sử dụng cùng nhau những thay đổi chưa phát hành.

Bạn có thể yêu cầu npm sử dụng một gói từ máy của bạn thay vì tìm nạp gói đó từ sổ đăng ký npm. Khi sử dụng phương thức này, bạn sẽ có quyền truy cập vào các bản đồ nguồn để gỡ lỗi blockly_com nền dễ dàng hơn. Bạn có thể sử dụng phương thức này với các thay đổi trong lõi chưa được đẩy lên GitHub.

  1. Trong nhánh khối của bạn:

    $ npm run package
$ cd dist
$ npm link

    Các bước này tạo khối cốt lõi, đóng gói, sau đó tạo một đường liên kết tượng trưng với các tệp đóng gói.

  2. Trong nhánh mẫu khối của bạn:

    $ npm link blockly

    Bước này yêu cầu npm tìm đường liên kết tượng trưng mà bạn đã tạo trước đó thay vì tìm nạp gói từ npm.

  3. npm run start để kiểm thử trình bổ trợ.

Khi thực hiện thay đổi về cốt lõi, bạn sẽ phải xây dựng lại và đóng gói lại.

Phương pháp 2: Tìm nạp từ GitHub

Bạn có thể yêu cầu npm tìm nạp một gói từ GitHub thay vì từ sổ đăng ký npm. Khi sử dụng phương thức này, bạn sẽ có quyền truy cập vào bản đồ nguồn để gỡ lỗi blockly_compressed dễ dàng hơn. Bạn sẽ phải sử dụng một phiên bản khối đã được phát hành ở nơi nào đó trên GitHub.

  1. Hãy đảm bảo phần scripts trong package.json dành cho trình bổ trợ của bạn bao gồm:

    "postinstall": "blockly-scripts postinstall"

    Tập lệnh này sẽ tự động tạo Blockly sau khi được cài đặt qua GitHub ở bước sau.

  2. Thay vì cung cấp số phiên bản cho khối trong package.json, hãy cung cấp địa chỉ git và tên nhánh:

    "blockly": "git://github.com/google/blockly.git#develop"

    Đây cũng có thể là đường liên kết đến nhánh riêng của bạn nếu có các thay đổi chưa hợp nhất.

  3. npm install như bình thường

  4. npm run start để kiểm thử trình bổ trợ

Khi thực hiện thay đổi trong Blockly cốt lõi, bạn sẽ phải đẩy các thay đổi đó lên GitHub tại nhánh được chỉ định. Ngoài ra, khi muốn npm tìm nạp một phiên bản mới từ GitHub, bạn sẽ phải npm uninstall blockly (hoặc xoá phiên bản đó khỏi node_modules) rồi cài đặt lại như mô tả ở trên.

Phương pháp 3: Playground nâng cao

Bạn có thể sử dụng sân chơi nâng cao (trong Core Blockly) để gỡ lỗi trình bổ trợ của mình. Khi dùng phương thức này, bạn sẽ dùng blockly_uncompressed. Cách này có thể dễ gỡ lỗi hơn vì bạn sẽ không dựa vào bản đồ nguồn. Hãy sử dụng phương thức này nếu bạn gặp sự cố khi gỡ lỗi bằng bản đồ nguồn hoặc muốn kiểm thử trình bổ trợ bằng cách sử dụng các tính năng của mô phỏng nâng cao.

  1. Trong thư mục trình bổ trợ của bạn ở mẫu khối:

    $ npm run build
$ cd dist
$ pwd

    Thao tác này sẽ tạo và đóng gói trình bổ trợ của bạn. Sau đó, công cụ này sẽ in đường dẫn thư mục đầy đủ của thư mục dist cho trình bổ trợ của bạn. Sao chép đường dẫn này; chúng ta sẽ cần nó ở bước tiếp theo.

  2. Theo khối, trong advanced_playground.html:

    <script src="$PATH_TO_DIST_DIR/index.js">

    Sau đó, bạn cũng cần thực hiện mọi thiết lập cần thiết cho trình bổ trợ của mình. Ví dụ: bạn có thể cần chỉ định một số giá trị nhất định trong đối tượng tuỳ chọn. Hãy thực hiện việc thiết lập này trong phần thiết lập không gian làm việc hiện tại.

  3. Mở mô phỏng nâng cao trong trình duyệt để kiểm thử trình bổ trợ của bạn.

Khi thực hiện thay đổi theo khối, bạn chỉ cần làm mới. Khi thực hiện thay đổi đối với trình bổ trợ, bạn cần chạy lại npm run build.