Как получить код

Существует несколько способов получить код 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.

Unpkg

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

Если добавить следующий код на любую 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>

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

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

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

Импорт

Примечание: Для импорта целевых объектов наших пакетов необходимо использовать сборщик (например, webpack), поскольку 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);