Pobierz kod

Istnieje kilka sposobów uzyskania kodu Blockly i kilka sposobów jego wczytania.

Skrypt create-package

Blockly udostępnia skrypt, który uruchamia aplikację startową, którą możesz później zmodyfikować. Używa on popularnych narzędzi do tworzenia stron internetowych, takich jak webpack i eslint, ale nie zawiera platformy, takiej jak React czy Angular.

Zanim uruchomisz te polecenia, musisz zainstalować node.js i npm.

Aby utworzyć aplikację napisaną w języku JavaScript w nowym katalogu hello-world:

npx @blockly/create-package app hello-world

Aby utworzyć aplikację napisaną w TypeScript w nowym katalogu hello-world:

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

Tworzą one pakiet, który importuje docelowe pakiety. Do zarządzania zależnościami używa też pliku package.json, dzięki czemu łatwo jest aktualizować Blockly do najnowszej wersji.

Zawiera też kilka przydatnych skryptów startowych, np. skrypt do testowania projektu lokalnie w przeglądarce:

cd hello-world
npm run start

Inne polecenia znajdziesz w wygenerowanym pliku package.json.

Unpkg

Jeśli chcesz tylko pobawić się pomysłami i nie chcesz uruchamiać pełnej aplikacji, możesz wczytać Blockly z unpkg za pomocą tagów skryptu.

Jeśli dodasz te elementy do dowolnej strony HTML, możesz otworzyć kod HTML bezpośrednio w przeglądarce, aby eksperymentować z 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>

Nie jest to dobre długoterminowe rozwiązanie na pozyskiwanie danych z Blockly, ponieważ nie działa ono z pakietarzami takimi jak webpack, ale nadaje się do tworzenia prototypów i eksperymentowania.

Pobierz kod

Istnieje kilka sposobów na uzyskanie kodu do uruchomienia Blockly.

Zespół Blockly zaleca wymaganie korzystania z Blockly za pomocą menedżera pakietów (np. NPM lub Yarn), ponieważ:

• Łatwiej jest śledzić zmiany w Blockly
• Zachęca do używania wtyczek zamiast stosowania nieoficjalnych poprawek w Blockly.

NPM

npm install blockly --save

Włóczka

yarn add blockly

GitHub

Skompresowany kod możesz też pobrać z wersji GitHub. Wymaga to jednak ręcznego pobierania kodu w regularnych odstępach czasu, aby otrzymywać najnowsze aktualizacje i poprawki do Blockly.

Ostrzeżenie: pliki do pobrania z Githuba są udostępniane tylko dla wygody deweloperów, którzy wcześniej forkowali Blockly. Jeśli jesteś nowym deweloperem, użyj menedżera pakietów.

Wczytaj kod

Po otrzymaniu kodu możesz uzyskać do niego dostęp na kilka sposobów.

Tagi skryptu

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

Gdy używasz tagów skryptu, możesz uzyskać dostęp do importów z przestrzeni nazw globalnej:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

Uwaga: przy użyciu tagów skryptu nie możesz mieć wielu plików wiadomości, ponieważ wiadomości są stosowane bezpośrednio do tablicy Blockly.Msg.

Importy

Uwaga: aby używać importowanych przez nas celów pakietu, musisz używać narzędzia do tworzenia pakietów (np. webpack), ponieważ Blockly jest pakowane jako UMD, a nie 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';

Podczas importowania plików wiadomości musisz je też zastosować.

Blockly.setLocale(En);

Wymagania

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

Jeśli potrzebujesz plików wiadomości, musisz je też zastosować.

Blockly.setLocale(En);