Стань блочным

Есть несколько способов получить код Blockly и несколько способов загрузить его после получения.

Скрипт создания пакета

Blockly предоставляет сценарий, который загружает стартовое приложение, которое вы затем можете изменить. Он использует распространенные инструменты веб-разработки, такие как webpack и eslint , но не включает в себя фреймворк, такой как React или Angular.

Для этого вам необходимо установить node.js и npm перед выполнением следующих команд.

Чтобы создать приложение, написанное на JavaScript, в новом каталоге hello-world :

npx @blockly/create-package app hello-world

Чтобы создать приложение, написанное на TypeScript, в новом каталоге hello-world :

npx @blockly/create-package app hello-world --typescript

Они создают пакет, который импортирует целевые объекты пакета . Он также использует файл package.json для управления зависимостями, что позволяет легко оставаться в курсе последних версий Blockly.

Он также поставляется с некоторыми удобными стартовыми скриптами, например, для локального тестирования проекта в браузере:

cd hello-world
npm run start

Вы можете обратиться к сгенерированному файлу package.json для получения других команд.

Распаковать

Если вы просто обдумываете идеи и не хотите загружать полное приложение, вы можете загрузить Blockly из unpkg, используя теги сценария.

Если вы добавите следующее на любую HTML-страницу, вы сможете открыть HTML непосредственно в браузере и поэкспериментировать с 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>

Это не лучшее долгосрочное решение для приобретения Blockly, поскольку оно не работает с такими сборщиками, как webpack, но хорошо подходит для прототипирования и экспериментирования.

Получить код

Есть несколько способов заставить код запускаться Blockly.

Команда Blockly рекомендует использовать Blockly через менеджер пакетов (например, NPM или Yarn ), потому что:

• Легче быть в курсе изменений в Blockly
• Он поощряет использование плагинов вместо патчей Blockly.

НПМ

npm install blockly --save

Пряжа

yarn add blockly

GitHub

Вы также можете скачать сжатый код из наших релизов на GitHub . Однако для этого вам потребуется вручную загружать код через определенные промежутки времени, чтобы получать последние обновления и исправления Blockly.

Предупреждение. Загрузки с Github предоставляются только для удобства разработчиков, которые ранее создавали форк Blockly. Если вы новый разработчик, вам следует использовать менеджер пакетов.

Загрузите код

После того как вы получили код, вы можете получить к нему доступ из своего кода несколькими способами.

Теги скрипта

<!-- 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>

При использовании тегов скриптов вы можете получить доступ к импорту из глобального пространства имен:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

Примечание. При использовании тегов сценариев вы не можете иметь несколько файлов сообщений, поскольку сообщения применяются непосредственно к массиву Blockly.Msg .

Импорт

Примечание. Для импорта наших целевых пакетов необходимо использовать сборщик (например, веб-пакет), поскольку Blockly упаковывается как UMD, а не как ESM.

// 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';

Когда вы импортируете файлы сообщений, вам также необходимо применить их.

Blockly.setLocale(En);

Требует

// 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');

Если вам требуются файлы сообщений, вам также необходимо применить их.

Blockly.setLocale(En);