Mendapatkan kode

Ada beberapa cara untuk mendapatkan kode Blockly, dan beberapa cara untuk memuatnya setelah Anda mendapatkannya.

Membuat skrip paket

Blockly menyediakan skrip yang mem-bootstrap aplikasi awal, yang kemudian dapat Anda ubah. Alat ini menggunakan alat pengembangan web umum seperti webpack dan eslint, tetapi tidak menyertakan framework, seperti React atau Angular.

Untuk melakukannya, Anda harus menginstal node.js dan npm sebelum menjalankan perintah berikut.

Untuk membuat aplikasi yang ditulis dalam JavaScript di direktori hello-world baru:

npx @blockly/create-package app hello-world

Untuk membuat aplikasi yang ditulis dalam TypeScript di direktori hello-world baru:

npx @blockly/create-package app hello-world --typescript

Tindakan ini akan membuat paket yang mengimpor target paket. Library ini juga menggunakan file package.json untuk mengelola dependensi, yang memudahkan Anda untuk terus menggunakan Blockly versi terbaru.

Aplikasi ini juga dilengkapi dengan beberapa skrip awal yang praktis, seperti skrip untuk menguji project secara lokal di browser:

cd hello-world
npm run start

Anda dapat melihat file package.json yang dihasilkan untuk perintah lainnya.

Unpkg

Jika Anda hanya ingin mencoba ide dan tidak ingin mem-bootstrap aplikasi lengkap, Anda dapat memuat Blockly dari unpkg menggunakan tag skrip.

Jika menambahkan kode berikut ke halaman HTML, Anda dapat membuka HTML secara langsung di browser untuk bereksperimen dengan 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>

Ini bukan solusi jangka panjang yang baik untuk mendapatkan Blockly, karena tidak berfungsi dengan bundler seperti webpack, tetapi bagus untuk pembuatan prototipe dan eksperimen.

Mendapatkan kode

Ada beberapa cara untuk mendapatkan kode guna menjalankan Blockly.

Tim Blockly merekomendasikan untuk mewajibkan Blockly melalui pengelola paket (seperti NPM atau Yarn) karena:

• Lebih mudah untuk terus mendapatkan informasi terbaru tentang perubahan di Blockly
• Hal ini mendorong penggunaan plugin, bukan monkeypatching Blockly

NPM

npm install blockly --save

Yarn

yarn add blockly

GitHub

Anda juga dapat mendownload kode yang dikompresi dari rilis GitHub kami. Namun, Anda harus mendownload kode secara manual secara berkala untuk menerima update dan perbaikan terbaru pada Blockly.

Peringatan: Download GitHub hanya disediakan untuk memudahkan developer yang sebelumnya melakukan fork Blockly. Jika Anda adalah developer baru, Anda harus menggunakan pengelola paket.

Memuat kode

Setelah mendapatkan kode, ada beberapa cara untuk mengaksesnya dari kode Anda.

Tag skrip

<!-- 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>

Saat menggunakan tag skrip, Anda dapat mengakses impor dari namespace global:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

Catatan: Saat menggunakan tag skrip, Anda tidak dapat memiliki beberapa file pesan karena pesan diterapkan langsung ke array Blockly.Msg.

Impor

Catatan: Untuk menggunakan impor target paket, Anda harus menggunakan pemaket (seperti webpack), karena Blockly dikemas sebagai UMD, bukan ESM.

// 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';

Saat mengimpor file pesan, Anda juga harus menerapkannya.

Blockly.setLocale(En);

Memerlukan

// 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');

Jika memerlukan file pesan, Anda juga harus menerapkannya.

Blockly.setLocale(En);