Có một số cách để lấy mã Blockly và một số cách để tải mã đó sau khi bạn đã lấy được.
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 động mà bạn có thể chỉnh sửa. Công cụ 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, chẳng hạn như React hoặc Angular.
Để làm việc này, bạn cần cài đặt node.js và npm trước khi chạy các lệnh sau.
Cách tạo một ứng dụng được viết bằng JavaScript trong thư mục hello-world mới:
npx @blockly/create-package app hello-world
Cách tạo một ứ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 tệp này tạo một gói nhập mục tiêu gói. Trình quản lý 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 Blockly mới nhất.
Thư viện này cũng đi kèm với 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ử dự án trên máy trong 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.
Unpkg
Nếu chỉ muốn thử nghiệm các ý tưởng và không muốn tạo một ứng dụng đầy đủ, bạn có thể tải Blockly từ unpkg bằng các thẻ tập lệnh.
Nếu thêm nội dung sau vào bất kỳ trang HTML nào, bạn có thể mở HTML trực tiếp trong 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 tốt để mua Blockly vì giải pháp này không hoạt động với các trình kết hợp như webpack, nhưng giải pháp này phù hợp để tạo bản minh hoạ và thử nghiệm.
Lấy mã
Có một số cách để bạn có thể chạy mã Blockly.
Nhóm Blockly đề xuất yêu cầu Blockly thông qua trình quản lý gói (như NPM hoặc Yarn) vì:
- Dễ dàng nắm bắt các thay đổi trong Blockly
- Bạn nên sử dụng trình bổ trợ thay vì sửa đổi mã nguồn Blockly
NPM
npm install blockly --save
Sợi
yarn add blockly
GitHub
Bạn cũng có thể tải mã nén xuống từ các bản phát hành GitHub của chúng tôi. Tuy nhiên, bạn cần phải tải mã xuống theo cách thủ công vào các khoảng thời gian đều đặn để 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ã đó từ mã của mình theo một số cách.
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 các tệp nhập từ không gian tên toàn cục:
// 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 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 yêu cầu tệp thông báo, bạn cũng cần áp dụng các tệp đó.
Blockly.setLocale(En);