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 create-package
Blockly cung cấp một tập lệnh khởi động một ứng dụng khởi đầu mà sau đó bạn có thể sửa đổi. Nền tảng 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 một khung, chẳng hạn như React hoặc Angular.
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 mục tiêu này tạo ra một gói nhập các mục tiêu của gói. Công cụ 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.
Nó cũng đi kèm với một số tập lệnh khởi động tiện dụng, chẳng hạn như tập lệnh để kiểm thử dự án cục bộ 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 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 nội dung sau vào bất kỳ trang HTML nào, bạn có thể mở trực tiếp HTML 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à một giải pháp lâu dài phù hợp để có được Blockly, vì giải pháp này không hoạt động với các trình đóng gói như webpack, nhưng phù hợp cho việc tạo mẫu và thử nghiệm.
Lấy mã
Có một số cách để chạy mã cho Blockly.
Nhóm Blockly đề xuất yêu cầu Blockly thông qua một trình quản lý gói (chẳng hạn như NPM hoặc Yarn) vì:
- Bạn có thể dễ dàng nắm bắt những thay đổi trong Blockly
- Điều này khuyến khích sử dụng các trình bổ trợ thay vì monkeypatching 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 trên 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 sau những khoảng thời gian đều đặn để nhận được 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 mã đó theo một số cách từ 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 các nội dung 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 tệp thông báo, 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 các tệp thông báo, bạn cũng cần áp dụng các tệp đó.
Blockly.setLocale(En);