Proses debug dengan Blockly dan contoh blockly

Terkadang saat mengembangkan plugin dalam contoh blockly, Anda harus membuat perubahan yang sesuai di Blockly itu sendiri. Sebagian besar plugin disiapkan untuk mengambil Blockly dari registry npm, sehingga Anda hanya dapat menggunakan kode yang telah dirilis di npm. Hal ini akan menyulitkan proses debug perubahan Blockly. Jika ingin membuat dan menguji perubahan dalam contoh blockly dan blockly, Anda dapat menggunakan salah satu metode di bawah ini untuk menggunakan perubahan yang belum dirilis bersamaan.

Anda dapat memberi tahu npm untuk menggunakan paket dari komputer, bukan mengambil paket dari registry npm. Dengan menggunakan metode ini, Anda akan memiliki akses ke sourcemap yang mempermudah proses debug blockly_comkompresi. Anda dapat menggunakan metode ini dengan perubahan pada inti yang belum dikirim ke GitHub.

  1. Dalam fork blockly Anda:

    $ npm run package
$ cd dist
$ npm link

    Langkah-langkah ini meliputi pembuatan inti Blockly, paketkan, lalu buat symlink ke file paket.

  2. Di fork sampel blockly Anda:

    $ npm link blockly

    Langkah ini akan memberi tahu npm untuk mencari symlink yang Anda buat sebelumnya, bukan mengambil paket dari npm.

  3. npm run start untuk menguji plugin Anda.

Saat membuat perubahan pada inti, Anda harus membangun ulang dan mengemasnya ulang.

Metode 2: Mengambil dari GitHub

Anda dapat memberi tahu npm untuk mengambil paket dari GitHub, bukan dari registry npm. Dengan menggunakan metode ini, Anda akan memiliki akses ke peta sumber yang mempermudah proses debug blockly_comkompresi. Anda harus menggunakan versi blockly yang sudah dipublikasikan di GitHub.

  1. Pastikan bagian scripts di package.json untuk plugin Anda menyertakan hal-hal berikut:

    "postinstall": "blockly-scripts postinstall"

    Skrip ini akan otomatis mem-build Blockly setelah diinstal dari GitHub di langkah berikutnya.

  2. Daripada memberikan nomor versi untuk blockly di package.json, berikan alamat git dan nama cabang:

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

    Link ini juga dapat menjadi link ke fork block Anda sendiri jika ada perubahan yang terpisah.

  3. npm install seperti biasa

  4. npm run start untuk menguji plugin Anda

Saat membuat perubahan di Blockly inti, Anda harus mengirimkannya ke GitHub di cabang yang ditentukan. Selain itu, jika Anda ingin npm mengambil versi baru dari GitHub, Anda harus npm uninstall blockly (atau menghapusnya dari node_modules) lalu menginstal ulang versi tersebut seperti yang dijelaskan di atas.

Metode 3: Playground Lanjutan

Anda dapat menggunakan playground lanjutan (di inti Blockly) untuk men-debug plugin Anda. Dengan metode ini, Anda akan menggunakan blockly_uncompressed, yang mungkin lebih mudah di-debug karena Anda tidak akan mengandalkan peta sumber. Gunakan metode ini jika Anda mengalami masalah saat melakukan proses debug dengan peta sumber atau ingin menguji plugin menggunakan fitur playground lanjutan.

  1. Di direktori plugin Anda di contoh blockly:

    $ npm run build
$ cd dist
$ pwd

    Tindakan ini akan mem-build dan memaketkan plugin Anda. Kemudian ia akan mencetak jalur direktori lengkap dari direktori dist untuk plugin Anda. Salin jalur ini; kita akan membutuhkannya di langkah berikutnya.

  2. Dalam blockly, di advanced_playground.html:

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

    Kemudian, Anda juga perlu melakukan penyiapan yang diperlukan untuk plugin Anda. Misalnya, Anda mungkin perlu menentukan nilai tertentu dalam objek opsi. Lakukan penyiapan ini di penyiapan ruang kerja yang ada.

  3. Buka playground lanjutan di browser untuk menguji plugin Anda.

Saat melakukan perubahan blockly, Anda hanya perlu memuat ulang. Saat melakukan perubahan pada plugin, Anda harus menjalankan ulang npm run build.