Kod Blockly można uzyskać na kilka sposobów, a po jego uzyskaniu można go wczytać na kilka sposobów.
Skrypt create-package
Blockly udostępnia skrypt, który uruchamia aplikację startową, którą możesz następnie zmodyfikować. Korzysta z popularnych narzędzi do tworzenia stron internetowych, takich jak webpack i eslint, ale nie zawiera platformy, takiej jak React czy Angular.
Przed uruchomieniem tych poleceń musisz zainstalować node.js i npm.
Aby utworzyć aplikację napisaną w 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
W ten sposób utworzysz pakiet, który importuje środowiska docelowe pakietu. Do zarządzania zależnościami używa też pliku package.json, co ułatwia aktualizowanie Blockly do najnowszej wersji.
Zawiera też przydatne skrypty startowe, 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 tylko eksperymentujesz z pomysłami i nie chcesz uruchamiać pełnej aplikacji, możesz wczytać Blockly z unpkg za pomocą tagów skryptu.
Jeśli dodasz poniższy kod do dowolnej strony HTML, możesz otworzyć ją 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 rozwiązanie długoterminowe do pozyskiwania Blockly, ponieważ nie działa z narzędziami do łączenia plików, takimi jak webpack, ale jest przydatne do prototypowania i eksperymentowania.
Pobierz kod
Kod do uruchomienia Blockly możesz uzyskać na kilka sposobów.
Zespół Blockly zaleca wymaganie Blockly za pomocą menedżera pakietów (np. NPM lub Yarn), ponieważ:
- Łatwiej jest być na bieżąco ze zmianami w Blockly
- Zachęca do używania wtyczek zamiast modyfikowania Blockly.
NPM
npm install blockly --save
Włóczka
yarn add blockly
GitHub
Możesz też pobrać skompresowany kod z naszych wersji na GitHubie. Wymaga to jednak ręcznego pobierania kodu w regularnych odstępach czasu, aby otrzymywać najnowsze aktualizacje i poprawki Blockly.
Wczytywanie kodu
Po otrzymaniu kodu możesz uzyskać do niego dostęp na kilka sposobów.
Tagi skryptów
<!-- 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 globalnej przestrzeni nazw:
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.libraryBlocks['block_type'];
// Access the generator.
javascript.javascriptGenerator;
Importy
// 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';
Po zaimportowaniu plików z wiadomościami 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 z wiadomościami, musisz je też zastosować.
Blockly.setLocale(En);