Tập lệnh tạo bản dựng chặn

Blockly bao gồm hơn một trăm tệp TypeScript. Các tập lệnh này phải được trình biên dịch TypeScript (tsc) biên dịch thành JavaScript trước khi có thể sử dụng. Điều này tạo ra số lượng tệp .js lớn tương đương phù hợp cho việc kiểm thử cục bộ, nhưng việc tải một số lượng lớn tệp lớn như vậy qua Internet là một trải nghiệm chậm đối với người dùng cuối. Để giúp Blockly tải nhanh hơn, Trình biên dịch đóng được dùng để nén (rút gọn) và kết hợp các tệp đó thành nhiều tệp ("gói" hoặc "đoạn") với tổng kích thước chưa bằng một nửa kích thước của tệp không nén.

Trong quá trình này, đoạn mã sử dụng các tính năng ECMAScript mới nhất (các tính năng có thể không tương thích với một số trình duyệt) sẽ được dịch xuống ES6, thường tương thích với hầu hết các trình duyệt được sử dụng rộng rãi. Do đó, điều quan trọng là bạn chỉ phân phát mã đã rút gọn cho người dùng cuối.

Kho lưu trữ google/blockly chỉ chứa mã nguồn. Trước đây, thư viện này cũng chứa các sản phẩm bản dựng, nhưng kể từ năm 2019, các gói rút gọn đã được phát hành dưới dạng gói blockly MAP và kể từ năm 2022 cũng được đính kèm dưới dạng tệp .tgz vào mỗi bản phát hành GitHub. Vì vậy, bạn không cần tạo Blockly trừ phi bạn đang xâm nhập chính Blockly — cụ thể là trên các tệp trong thư mục core, blocks, generators hoặc msg.

Quá trình xây dựng, kiểm thử và xuất bản Blockly được tự động hoá bằng cách sử dụng tập lệnh npm để chạy các tác vụ Gulp. Trang này ghi lại các tập lệnh nguyên tắc và chức năng của từng tập lệnh.

Chế độ nén và không nén

Việc tải Blockly trực tiếp từ các tệp .js riêng lẻ do trình biên dịch TypeScript tạo ra được gọi là "chế độ không nén". Nhờ tránh được một số bước xây dựng chậm, nên phương pháp này sẽ hỗ trợ chu kỳ chỉnh sửa-biên dịch nhanh chóng; cũng hỗ trợ gỡ lỗi vì mã JavaScript đang được thực thi gần như có thể đọc được như các nguồn TypeScript ban đầu, giảm bớt nhu cầu phụ thuộc vào bản đồ nguồn.

Quá trình tải Chặn từ các gói giảm kích thước được gọi là "chế độ nén". Đây là cách tốt nhất để kiểm thử các thay đổi đối với Blockly khi sử dụng khối này làm phần phụ thuộc của một gói khác, vì công cụ này sẽ kiểm thử (phiên bản chưa phát hành của) gói npm blockly.

N.B.: Có một số vị trí trong kho lưu trữ khối, trong đó các cụm từ "chế độ không được biên dịch" và "chế độ đã biên dịch" được sử dụng đồng nghĩa với "chế độ không nén" và "chế độ nén". Trước đây, cách sử dụng này rất có ý nghĩa vì Trình biên dịch đóng (Đóng) được dùng để nén (giảm thiểu) mã, nhưng bây giờ trình biên dịch TypeScript luôn cần thiết, ngay cả ở chế độ không nén. Vì vậy, thuật ngữ thay thế này có thể gây nhầm lẫn và không được khuyến khích.

Bắt đầu nhanh

  • Nếu bạn đã thực hiện các thay đổi cục bộ và muốn đảm bảo rằng những thay đổi đó không làm hỏng bản dựng hay bất kỳ quy trình kiểm thử nào, hãy chạy

    npm test
    

    để tạo Blockly và chạy bộ kiểm thử.

  • Nếu bạn muốn thử nghiệm các thay đổi cục bộ trong trình duyệt, hãy chạy

    npm start
    

    Đoạn mã này sẽ biên dịch Blockly và mở một trình duyệt web trỏ đến sân chơi Blockly đang chạy Blockly ở chế độ không nén.

    Mọi tệp trong core/, blocks/generators/ đã được sửa đổi sẽ tự động được biên dịch lại; hãy tải lại thẻ trình duyệt để xem các thay đổi.

  • Để tạo phiên bản được sửa đổi cục bộ của Blockly và kiểm thử phiên bản đó ở chế độ nén, dưới dạng phần phụ thuộc của một gói npm khác, hãy chạy

    npm run package
    

    để tạo gói Blockly, sau đó

    cd dist && npm link
    

    để cho npm biết vị trí cần tìm các tệp đã biên dịch, sau đó là cd đến thư mục của dự án trước khi chạy

    npm link blockly
    

    để gói của bạn sử dụng phiên bản mới được biên dịch của Blockly thay cho gói blockly đã phát hành.

Tài liệu tham khảo tập lệnh chi tiết

Phần này liệt kê nguyên tắc scripts trong tệp package.json của Blockly, kèm theo nội dung giải thích về thao tác của các nguyên tắc đó.

Các tập lệnh này tạo tệp ở hai vị trí:

  • Các tệp trong thư mục con build/ là các tệp trung gian được dùng để kiểm thử cục bộ hoặc được các phần sau này của quy trình xây dựng nhập vào.
  • Các tệp trong thư mục con dist/ tạo thành nội dung của gói npm đã phát hành.

Không có thư mục nào được theo dõi trong kho lưu trữ git theo khối.

clean

npm run clean dọn dẹp mọi bản dựng trước đó bằng cách xoá các thư mục build/dist/. Được dùng để sửa lỗi bản dựng phức tạp, đặc biệt là các lỗi do đổi tên tệp nguồn.

messages

npm run messages cập nhật các tệp thông báo trong msg/json/ bằng mọi thay đổi đã được thực hiện đối với msg/messages.js và sẽ chạy sau mỗi lần tệp đó được sửa đổi.

langfiles

npm run langfiles tạo các tệp ngôn ngữ đã biên dịch trong build/msg/ từ các tệp thông báo trong msg/json.

tsc

npm run tsc chạy trình biên dịch TypeScript trên nội dung của các thư mục core/, blocks/generators/, đồng thời xuất từng tệp .js sang build/src/.

minify

npm run minify chạy closure-make-depsclosure-calculate-chunks để xác định cách chia các tệp .js đã biên dịch thành các phần (gói giảm thiểu), sau đó chạy closure-compiler để tạo các phần như sau:

  • Nội dung của build/src/core/ trở thành dist/blockly_compressed.js.
  • Nội dung của build/src/blocks/ trở thành dist/blocs_compressed.js.
  • Nội dung của build/src/generators/javascript/ (cộng với build/src/generators/javascript.js) trở thành dist/javascript_compressed.js.
  • Và tương tự cho dart, lua, phppython.

Các đoạn được tạo sẽ sử dụng một trình bao bọc để đảm bảo khả năng tương thích với Định nghĩa mô-đun phổ quát. Vì vậy, bạn không cần xử lý thêm trước khi đưa những dữ liệu này vào gói.

build

npm run build chạy các tác vụ minifylangfiles. Thao tác này sẽ thực hiện mọi việc cần thiết để tải nền tảng Blockly ở chế độ nén hoặc không nén.

package

npm run package chạy tác vụ cleanbuild, sau đó:

  • Áp dụng một trình bao bọc UMD bao bọc các tệp trong build/msg/, đặt các phiên bản được bao bọc trong dist/msg/.
  • Thêm nhiều tệp hỗ trợ bổ sung vào dist/, với các trình bao bọc UMD nếu có.

publish

npm run publish được nhóm Blockly sử dụng để phát hành gói blockly npm. Việc này phụ thuộc vào cơ sở hạ tầng nội bộ của Google, vì vậy, nó sẽ không hữu ích cho các nhà phát triển bên ngoài.

lint

npm run lint chạy ESLint, thực hiện việc phân tích tĩnh của mã nguồn Blockly để tìm vấn đề.

test

npm test (hoặc npm run test) chạy tác vụ package, sau đó chạy nhiều chương trình kiểm thử tự động (bao gồm cả chạy ESLint). Bạn nên chạy và truyền mã này trên mọi mã được gửi dưới dạng yêu cầu kéo đối với kho lưu trữ khối.