Debug con Blockly e blockly-samples

A volte, durante lo sviluppo di un plug-in in blockly-samples, devi apportare le modifiche corrispondenti in Blockly. La maggior parte dei plug-in è configurata per recuperare Blockly dal registry npm, quindi potrai usare solo il codice già rilasciato su npm. Ciò renderebbe difficile il debug delle modifiche di Blockly. Se vuoi apportare e verificare le modifiche sia negli esempi a blocchi che in quelli a blocchi, puoi utilizzare uno dei metodi riportati di seguito per utilizzare insieme le modifiche non ancora rilasciate.

Puoi indicare a npm di utilizzare un pacchetto dalla tua macchina anziché recuperare il pacchetto dal registro npm. Con questo metodo dovresti avere accesso alle mappe di origine che semplificano il debug di blockly_compress. Puoi utilizzare questo metodo con modifiche nel core di cui non è ancora stato eseguito il push su GitHub.

  1. Nel tuo fork of blockly:

    $ npm run package
$ cd dist
$ npm link

    Questi passaggi consentono di creare il core di Blockly, pacchettizzarlo e poi creare un link simbolico ai file in pacchetto.

  2. Nel fork degli esempi a blocchi:

    $ npm link blockly

    Questo passaggio indica a npm di cercare il link simbolico creato in precedenza anziché recuperare il pacchetto da npm.

  3. npm run start per testare il plug-in.

Quando apporti modifiche al core, devi ricrearlo e ripresentarlo.

Metodo 2: recupero da GitHub

Puoi indicare a npm di recuperare un pacchetto da GitHub anziché dal registro npm. Con questo metodo dovresti avere accesso alle mappe delle origini che semplificano il debug di blockly_compress. Dovrai usare una versione di blockly già pubblicata da qualche parte su GitHub.

  1. Assicurati che la sezione scripts in package.json relativa al plug-in includa quanto segue:

    "postinstall": "blockly-scripts postinstall"

    Questo script creerà automaticamente Blockly dopo l'installazione da GitHub in un passaggio successivo.

  2. Anziché specificare un numero di versione per blockly in package.json, fornisci un indirizzo Git e un nome del ramo:

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

    Può anche essere un link al tuo fork di blockly se hai modifiche non unite.

  3. npm install come al solito

  4. npm run start per testare il plug-in

Quando apporti modifiche al core Blockly, devi eseguirne il push su GitHub nel ramo specificato. Inoltre, se vuoi che npm recuperi una nuova versione da GitHub, dovrai npm uninstall blockly (o altrimenti rimuoverla da node_modules) e poi reinstallarla come descritto sopra.

Metodo 3: Playground avanzato

Puoi utilizzare il parco giochi avanzato (nel blocco principale) per eseguire il debug del tuo plug-in. Con questo metodo, utilizzerai blockly_uncompressed, che può essere più facile da usare per il debug, poiché non ti servirai delle mappe delle origini. Utilizza questo metodo se hai difficoltà a eseguire il debug con le mappe di origine o se vuoi testare il plug-in utilizzando le funzioni dell'area giochi avanzata.

  1. Nella directory dei plug-in in blockly-samples:

    $ npm run build
$ cd dist
$ pwd

    Questa operazione crea e pacchettizza il plug-in. Viene quindi stampato il percorso completo della directory dist del plug-in. Copia questo percorso; ti servirà nel passaggio successivo.

  2. In blocco, in advanced_playground.html:

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

    Poi dovrai anche eseguire le eventuali configurazioni richieste per il plug-in. Ad esempio, potrebbe essere necessario specificare determinati valori nell'oggetto opzioni. Esegui questa configurazione nella configurazione dell'area di lavoro esistente.

  3. Apri l'area giochi avanzata nel browser per testare il plug-in.

Quando apporti modifiche in blocco, devi solo aggiornare. Quando apporti modifiche al plug-in, devi eseguire nuovamente npm run build.