Tải ứng dụng bị chặn

Có một số cách để lấy mã Blockly và một số cách để tải mã đó khi bạn đã có được nó.

Tập lệnh tạo gói

Blockly cung cấp một tập lệnh giúp khởi động một ứng dụng khởi đầu mà bạn có thể sau đó sửa đổi. API 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, như React hoặc Angular.

Thao tác này yêu cầu bạn phải cài đặtnode.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 đối tượng này sẽ tạo một gói nhập mục tiêu 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 thông tin bằng phiên bản Blockly mới nhất.

Đi kèm với một số tập lệnh khởi đầu hữu ích, chẳng hạn như tập lệnh để kiểm thử dự án 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.

Bỏ chỉnh sửa

Nếu bạn chỉ đang tìm tòi ý tưởng và không muốn tự mình khai thác hoàn toàn bạn có thể tải Blockly từ bản gỡ bỏ bằng cách sử dụng thẻ tập lệnh.

Nếu bạn 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 để 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 tốt để mua lại Blockly, vì nó không làm việc với các gói như webpack, nhưng nó cũng phù hợp cho việc tạo nguyên mẫu và thử nghiệm.

Lấy mã

Có một số cách mà bạn có thể lấy mã để chạy Blockly.

Nhóm Blockly khuyên bạn nên yêu cầu Blockly thông qua trình quản lý gói (như NM hoặc Sợi) vì:

  • Dễ dàng cập nhật hơn với các thay đổi trong Blockly
  • Phần mềm này khuyến khích việc sử dụng trình bổ trợ thay vì phát hành bản vá lỗi của Blockly

Điều khoản Dịch vụ (Nhà quảng cáo của Google)

npm install blockly --save

Sợi

yarn add blockly

GitHub

Bạn cũng có thể tải mã nén từ Bản phát hành GitHub. Tuy nhiên, để thực hiện được thao tác này, bạn phải tự tải mã này xuống định kỳ để nhận các bản cập nhật mới nhất và sửa lỗi cho Blockly.

Tải mã

Sau khi nhận được mã, có một số cách để bạn có thể truy cập mã từ .

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 lệnh 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);

Cần

// 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 tệp thông báo, bạn cũng cần áp dụng các tệp đó.

Blockly.setLocale(En);