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/
và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ạynpm 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/
và
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/
và generators/
, đồng thời xuất từng tệp .js
sang build/src/
.
minify
npm run minify
chạy closure-make-deps
và closure-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ànhdist/blockly_compressed.js
. - Nội dung của
build/src/blocks/
trở thànhdist/blocs_compressed.js
. - Nội dung của
build/src/generators/javascript/
(cộng vớibuild/src/generators/javascript.js
) trở thànhdist/javascript_compressed.js
. - Và tương tự cho
dart
,lua
,php
vàpython
.
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ụ minify
và langfiles
. 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ụ clean
và build
, 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 trongdist/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.