Ada beberapa cara untuk mendapatkan kode Blockly dan beberapa cara untuk memuatnya setelah Anda mendapatkannya.
Skrip buat paket
Blockly menyediakan skrip yang melakukan bootstrap pada aplikasi awal, yang kemudian dapat Anda ubah. Codelab ini menggunakan alat pengembangan web umum seperti webpack dan eslint, tetapi tidak menyertakan framework, seperti React atau Angular.
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 di TypeScript di direktori hello-world baru:
npx @blockly/create-package app hello-world --typescript
Tindakan ini akan membuat paket yang mengimpor target paket. Blockly juga menggunakan file package.json untuk mengelola dependensi, yang memudahkan Anda untuk terus mengikuti versi terbaru Blockly.
Tutorial 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 merujuk ke file package.json yang dihasilkan untuk perintah lainnya.
Lepaskan
Jika hanya mencoba ide dan tidak ingin mem-bootstrap aplikasi penuh, Anda dapat memuat Blockly dari unpkg menggunakan tag skrip.
Jika Anda menambahkan kode berikut ke halaman HTML, Anda dapat membuka HTML 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 tepat untuk memperoleh Blockly, karena tidak berfungsi dengan pemaket seperti webpack, tetapi bagus untuk pembuatan prototipe dan eksperimen.
Mendapatkan kode
Ada beberapa cara untuk mendapatkan kode agar Anda dapat menjalankan Blockly.
Tim Blockly merekomendasikan untuk mewajibkan Blockly melalui pengelola paket (seperti NPM atau Yarn) karena:
- Mendapatkan informasi terbaru terkait perubahan di Blockly lebih mudah
- Kebijakan ini mendorong penggunaan plugin daripada Monkeypatching Blockly
NPM
npm install blockly --save
Yarn
yarn add blockly
GitHub
Anda juga dapat mendownload kode terkompresi dari rilis GitHub kami. Namun, hal ini mengharuskan Anda untuk mendownload kode secara manual pada interval yang teratur agar dapat menerima update dan perbaikan terbaru untuk Blockly.
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;
Impor
// 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 perlu 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 perlu menerapkannya.
Blockly.setLocale(En);