Có một số cách để lấy mã Blockly và một số cách để tải mã này sau khi tải.
Tập lệnh tạo-gói
Blockly cung cấp một tập lệnh khởi động ứng dụng khởi đầu. Sau đó, bạn có thể sửa đổi ứng dụng này. Thư viện này sử dụng các công cụ phát triển web phổ biến như webpack và eslint, nhưng không bao gồm khung như React hoặc Angular.
Để làm được điều này, bạn phải cài đặt button.js và npm trước khi chạy các lệnh sau.
Cách tạo ứng dụng viết bằng JavaScript trong thư mục hello-world mới:
npx @blockly/create-package app hello-world
Cách tạo ứng dụng được viết bằng TypeScript trong thư mục hello-world mới:
npx @blockly/create-package app hello-world --typescript
Các đối tượng này sẽ tạo một gói nhập các mục tiêu gói. Thư viện này cũng sử dụng tệp package.json để quản lý các phần phụ thuộc, giúp bạn dễ dàng cập nhật phiên bản mới nhất của Blockly.
Android Studio cũng đi kèm một số tập lệnh khởi động hữu ích, chẳng hạn như một tập lệnh để kiểm thử cục bộ dự án trong một trình duyệt:
cd hello-world
npm run start
Bạn có thể tham khảo tệp package.json đã tạo để biết các lệnh khác.
Hủy
Nếu chỉ đang thử nghiệm các ý tưởng và không muốn tự khởi động một ứng dụng đầy đủ, bạn có thể tải Blockly từ unpkg bằng cách sử dụng thẻ tập lệnh.
Nếu thêm đoạn mã sau vào bất kỳ trang HTML nào, bạn có thể mở HTML trực tiếp trong một trình duyệt để thử nghiệm với Blockly:
<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>
Đây không phải là giải pháp lâu dài phù hợp để mua Blockly, vì giải pháp này không hiệu quả với các trình đóng gói như webpack, nhưng phù hợp để tạo nguyên mẫu và thử nghiệm.
Lấy mã
Có một số cách để bạn có thể chạy mã để chạy Blockly.
Nhóm Blockly khuyên bạn nên yêu cầu sử dụng Blockly thông qua một trình quản lý gói (như MAP hoặc Sợi) vì:
- Giúp bạn dễ dàng cập nhật những thay đổi trong chế độ Chặn
- Hộp cát về quyền riêng tư khuyến khích sử dụng trình bổ trợ thay vì gỡ lỗi Blockly
Nhóm giải quyết vấn đề
npm install blockly --save
Sợi
yarn add blockly
GitHub
Bạn cũng có thể tải mã nén xuống qua các bản phát hành GitHub. Tuy nhiên, điều này yêu cầu bạn phải tải mã xuống theo cách thủ công theo định kỳ để nhận các bản cập nhật và bản sửa lỗi mới nhất cho Blockly.
Tải mã
Sau khi nhận được mã, bạn có thể truy cập vào mã đó theo một số cách qua mã của mình.
Thẻ tập lệnh
<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>
Khi sử dụng thẻ tập lệnh, bạn có thể truy cập vào dữ liệu nhập từ không gian tên chung:
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.libraryBlocks['block_type'];
// Access the generator.
javascript.javascriptGenerator;
Nhập
// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';
Khi nhập các tệp thư, bạn cũng cần áp dụng các tệp đó.
Blockly.setLocale(En);
Yêu cầu
// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} = require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');
Khi cần đến tệp tin nhắn, bạn cũng cần áp dụng các tệp đó.
Blockly.setLocale(En);