Kod Blockly można pobrać na kilka sposobów i wczytać go na kilka sposobów gdy już go otrzymasz.
Skrypt tworzenia pakietu
Blockly udostępnia skrypt uruchamiający aplikację startową, a następnie zmienić. Wykorzystuje popularne narzędzia do tworzenia stron internetowych, takie jak webpack i eslint, ale nie zawiera platformy, np. React czy Angular.
Wymaga to zainstalowania node.js i npm przed uruchomieniem tych 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 TypeScript w nowym katalogu hello-world:
npx @blockly/create-package app hello-world --typescript
Utworzą one pakiet, który zaimportuje cele pakietu. Wykorzystuje też plik package.json do zarządzania zależnościami, co ułatwia ich aktualizowanie. z najnowszą wersją Blockly.
Zawiera też przydatne skrypty inicjujące, np. do testowania projektu lokalnie w przeglądarce:
cd hello-world
npm run start
Inne polecenia możesz znaleźć w wygenerowanym pliku package.json.
Unpkg
Jeśli tylko chcesz się bawić pomysłami i nie chcesz pobierać całego pakietu możesz załadować Blockly z unpkg za pomocą tagów skryptu.
Dodanie poniższego kodu do dowolnej strony HTML pozwala otworzyć kod HTML bezpośrednio w pliku aby 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 rozwiązanie długoterminowe związane z pozyskiwaniem Blockly działa z pakietami pakietów, takimi jak Webpack, ale sprawdza się w przypadku prototypowania, z eksperymentami.
Pobierz kod
Kod do uruchomienia Blockly można uzyskać na kilka sposobów.
Zespół Blockly zaleca korzystanie z Blockly za pomocą menedżera pakietów (np. NPM lub Yarn), ponieważ:
- Możesz łatwiej śledzić zmiany w Blockly
- Zachęcamy do korzystania z wtyczek zamiast stosowania wtyczki Blockly
NPM
npm install blockly --save
Włóczka
yarn add blockly
GitHub
Możesz też pobrać skompresowany kod ze strony Wersje GitHub. Wymaga to jednak ręcznego pobieraj kod w regularnych odstępach czasu, aby otrzymywać najnowsze aktualizacje; i poprawki w Blockly.
Wczytaj kod
Po otrzymaniu kodu możesz uzyskać do niego dostęp na swoim w kodzie.
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życie tagów skryptu daje 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';
Gdy zaimportujesz pliki wiadomości, musisz je zastosować.
Blockly.setLocale(En);
Wymagane
// 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 zastosować.
Blockly.setLocale(En);