Há várias maneiras de conseguir o código do Blockly e de carregá-lo depois de conseguir.
Criar script de pacote
O Blockly fornece um script que inicializa um aplicativo inicial, que você pode e modificar. Ele usa ferramentas comuns de desenvolvimento da Web, como webpack e eslint, mas não inclui um framework, como React ou Angular.
Para isso, é necessário instalar o node.js e o npm antes da execução. 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 no TypeScript em um novo diretório hello-world:
npx @blockly/create-package app hello-world --typescript
Eles criam um pacote que importa destinos de pacote. Ele também usa uma package.json para gerenciar dependências, o que facilita o processo de atualização com a 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.
Remover pacote
Se você está apenas brincando com ideias e não quer criar um protótipo aplicativo, é possível carregar o Blockly pelo unpkg usando tags de script.
Se você adicionar o seguinte a qualquer página HTML, você poderá abrir o HTML diretamente em um navegador para testar 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 a longo prazo para adquirir o Blockly, funciona com bundlers como o webpack, mas é bom para prototipagem e experimentação.
Acessar o código
Há várias maneiras de conseguir o código para executar o Blockly.
A equipe do Blockly recomenda solicitar o Blockly por meio de um gerenciador de pacotes (como NPM ou Yarn) porque:
- É mais fácil acompanhar as mudanças no Blockly
- Ele incentiva o uso de plug-ins em vez de monkeypatch com o Blockly
NPM
npm install blockly --save
Lã
yarn add blockly
GitHub
Você também pode baixar o código compactado no Versões do GitHub. No entanto, isso exige que você manualmente fazer o download do código em intervalos regulares para receber as atualizações mais recentes e correções no Blockly.
Carregar o código
Depois de obter o código, há várias maneiras de acessá-lo da sua o código-fonte.
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 a partir 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';
Ao importar os arquivos de mensagens, você também precisa 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 mensagens, também precisará aplicá-los.
Blockly.setLocale(En);