Há várias maneiras de conseguir o código do Blockly e de carregá-lo depois de recebê-lo.
Script de criação do pacote
O Blockly fornece um script que inicializa um aplicativo inicial, que você pode modificar. Ele usa ferramentas de desenvolvimento da Web comuns, como webpack e eslint, mas não inclui um framework, como React ou Angular.
Isso exige que você instale o node.js e o npm antes de executar os comandos a seguir.
Para criar um aplicativo escrito em JavaScript em um novo diretório hello-world:
npx @blockly/create-package app hello-world
Para criar um aplicativo escrito em TypeScript em um novo diretório hello-world:
npx @blockly/create-package app hello-world --typescript
Eles criam um pacote que importa destinos de pacotes. Ele também usa um arquivo package.json para gerenciar dependências, o que facilita o uso da versão mais recente do Blockly.
Ele também vem com alguns scripts iniciais úteis, como um para testar o projeto localmente em um navegador:
cd hello-world
npm run start
Você pode consultar o arquivo package.json gerado para outros comandos.
Pacote
Se você está só com algumas ideias e não quer inicializar um aplicativo completo, carregue o Blockly no unpkg usando tags de script.
Se você adicionar o seguinte a qualquer página HTML, será possível abrir o HTML diretamente em um navegador para testar com o 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>
Essa não é uma boa solução de longo prazo para adquirir a Blockly, porque não funciona com bundlers como o webpack, mas é boa para prototipagem e experimentação.
Acessar o código
Há várias maneiras de fazer com que o código execute o Blockly.
A equipe da Blockly recomenda exigir o uso de um gerenciador de pacotes (como NPM ou Yarn) pelos seguintes motivos:
- Ficou mais fácil acompanhar as mudanças no Blockly
- Ele incentiva o uso de plug-ins em vez de monkeypatch para o Blockly.
NPM
npm install blockly --save
Yarn
yarn add blockly
GitHub
Também é possível fazer o download do código compactado nas nossas versões do GitHub (em inglês). No entanto, isso exige que você faça o download manual do código em intervalos regulares para receber as atualizações e correções mais recentes do Blockly.
Carregar o código
Depois de receber o código, há várias maneiras de acessá-lo pelo código.
Tags de script
<!-- 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>
Ao usar tags de script, é possível acessar importações do namespace global:
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.libraryBlocks['block_type'];
// Access the generator.
javascript.javascriptGenerator;
Importações
// 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';
Quando você importar os arquivos de mensagem, também vai precisar aplicá-los.
Blockly.setLocale(En);
Requer
// 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');
Quando você precisar dos arquivos de mensagem, também vai precisar aplicá-los.
Blockly.setLocale(En);