Como depurar com Blockly e blockly-samples

Às vezes, ao desenvolver um plug-in em amostras blockly, você precisará fazer mudanças correspondentes no próprio Blockly. A maioria dos plug-ins está configurada para buscar o Blockly no registro npm. Assim, você só pode usar o código que já foi lançado no NPM. Isso dificultaria a depuração das mudanças do Blockly. Quando você quiser fazer e testar alterações em amostras em blocos e em blocos, use qualquer um dos métodos abaixo para usar as alterações que ainda não foram lançadas em conjunto.

Método 1: link npm

Você pode instruir o npm a usar um pacote da sua máquina em vez de buscá-lo no registro npm. Ao usar esse método, você terá acesso a mapas de origem que facilitam a depuração de blockly_compression. É possível usar esse método com alterações no núcleo que ainda não foram enviadas ao GitHub.

1. Na bifurcação do blockly:

   $ npm run package
   $ cd dist
   $ npm link
   

   Estas etapas criam o Blockly básico, o empacotam e criam um link simbólico para os arquivos empacotados.

2. Na bifurcação de blockly-samples:

   $ npm link blockly
   

   Esta etapa instrui o npm a procurar o link simbólico que você criou anteriormente em vez de buscar o pacote dele.

3. npm run start para testar o plug-in.

Quando você fizer mudanças na versão principal, será necessário criar a versão novamente e reempacotá-la.

Método 2: busca no GitHub

Você pode instruir o npm a buscar um pacote no GitHub em vez de no registro npm. Ao usar esse método, você precisa ter acesso a mapas de origem que facilitam a depuração de blockly_compression. Você precisará usar uma versão do blockly que já esteja publicada em algum lugar no GitHub.

1. Verifique se a seção scripts em package.json do plug-in inclui o seguinte:

   "postinstall": "blockly-scripts postinstall"
   

   Esse script vai criar automaticamente o Blockly depois da instalação do GitHub em uma etapa posterior.

2. Em vez de fornecer um número de versão para o blockly em package.json, forneça um endereço git e um nome da ramificação:

   "blockly": "git://github.com/google/blockly.git#develop"
   

   Isso também pode ser um link para sua própria bifurcação do blockly, se você tiver alterações não mescladas.

3. npm install como normal

4. npm run start para testar o plug-in.

Quando você fizer alterações no Blockly principal, será necessário enviá-las ao GitHub na ramificação especificada. Além disso, quando quiser que o npm busque uma nova versão do GitHub, será necessário usar npm uninstall blockly (ou removê-la do node_modules) e reinstalá-la, conforme descrito acima.

Método 3: Playground avançado

Você pode usar o Playground avançado (no principal Blockly) para depurar o plug-in. Com esse método, você usará blockly_uncompressed, que pode ser mais fácil de depurar, já que você não vai depender de mapas de origem. Use esse método se você tiver problemas de depuração com mapas de origem ou quiser testar o plug-in usando os recursos do Playground avançado.

1. No diretório do plug-in em blockly-samples:

   $ npm run build
   $ cd dist
   $ pwd
   

   Isso cria e empacota o plug-in. Em seguida, ele imprime o caminho completo do diretório dist para seu plug-in. Copie esse caminho, porque vamos precisar dele na próxima etapa.

2. Em blocos, no advanced_playground.html:

   <script src="$PATH_TO_DIST_DIR/index.js">
   

   Você também precisa fazer as configurações necessárias no plug-in. Por exemplo, pode ser necessário especificar certos valores no objeto de opções. Faça essa configuração na configuração do espaço de trabalho atual.

3. Abra o Playground avançado no navegador para testar seu plug-in.

Ao fazer mudanças em blocos, você só precisa atualizar a página. Quando você fizer mudanças no plug-in, será necessário executar npm run build novamente.