Pobierz Blockly

Kod Blockly można pobrać na kilka sposobów oraz na kilka sposobów.

Skrypt tworzenia pakietu

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

Wymaga to zainstalowania węzła.js i npm przed uruchomieniem poniższych poleceń.

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 języku TypeScript w nowym katalogu hello-world:

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

Powodują one utworzenie pakietu, który zaimportuje miejsca docelowe pakietów. Używa też pliku package.json do zarządzania zależnościami, dzięki czemu możesz zawsze być na bieżąco z najnowszą wersją Blockly.

Zawiera on też przydatne skrypty startowe, na przykład do testowania projektu lokalnie w przeglądarce:

cd hello-world
npm run start

W przypadku innych poleceń możesz skorzystać z wygenerowanego pliku package.json.

Unpaż

Jeśli tylko eksperymentujesz z pomysłami i nie chcesz uruchamiać całej aplikacji, możesz załadować Blockly z unpkg za pomocą tagów skryptu.

Jeśli dodasz do dowolnej strony HTML te elementy, możesz otworzyć kod HTML bezpośrednio w przeglądarce, by poeksperymentować 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 w przypadku zakupu Blockly, ponieważ nie działa z usługami pakietowymi takimi jak webpack, ale dobrze sprawdza się przy prototypowaniu i eksperymentowaniu.

Pobierz kod

Kod uruchamiania Blockly możesz uzyskać na kilka sposobów.

Zespół Blockly zaleca wymóg stosowania Blockly za pomocą menedżera pakietów (np. NPM lub Yarn), ponieważ:

• Teraz możesz łatwiej być na bieżąco ze zmianami w Blockly
• Zachęca do używania wtyczek zamiast wprowadzania poprawek do Blockly.

zarządzanie partnerami

npm install blockly --save

Włóczka

yarn add blockly

GitHub

Możesz też pobrać kod skompresowany z naszych wersji na GitHubie. Wymaga to jednak ręcznego pobierania kodu w regularnych odstępach czasu, aby otrzymywać najnowsze aktualizacje i poprawki Blockly.

Ostrzeżenie: pliki do pobrania z GitHuba są przeznaczone tylko dla programistów, którzy wcześniej rozwidlali Blockly. Jeśli jesteś nowym deweloperem, zalecamy korzystanie z menedżera pakietów.

Wczytaj kod

Po pobraniu 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>

Używając tagów skryptu, możesz uzyskać dostęp do importowanych danych z globalnej przestrzeni nazw:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

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

Importowane dane

Uwaga: korzystanie z importowania naszych miejsc docelowych pakietów wymaga korzystania z programu tworzenia pakietów (np. pakietu webpack), ponieważ Blockly jest w pakiecie typu 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 także 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 także zastosować.

Blockly.setLocale(En);