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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Есть несколько способов получить код 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 targets . Он также использует файл 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.

��агрузить код

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

Теги скрипта

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

Импорт

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