Ada beberapa cara untuk mendapatkan kode Blockly, dan beberapa cara untuk memuatnya setelah Anda mendapatkannya.
Skrip buat paket
Blockly menyediakan skrip yang mem-bootstrap aplikasi awal, yang bisa Anda kemudian mengubahnya. Webpack menggunakan alat pengembangan web umum seperti webpack dan eslint, tetapi tidak menyertakan framework, seperti React atau Angular.
Ini mengharuskan Anda untuk menginstal node.js dan npm sebelum menjalankannya 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
Metode ini akan membuat paket yang mengimpor target paket. Alat ini juga menggunakan file package.json untuk mengelola dependensi, yang memudahkan untuk mendapatkan info terbaru dengan Blockly versi terbaru.
Alat ini juga dilengkapi dengan beberapa skrip awal yang berguna, 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 lain.
Unpkg
Jika Anda hanya bermain-main dengan ide dan tidak ingin mem-bootstrap aplikasi, Anda dapat memuat Blockly dari {i>unpkg<i} menggunakan tag skrip.
Jika Anda menambahkan kode berikut ke laman 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 bekerja dengan pemaket seperti webpack, tetapi bagus untuk membuat prototipe dan eksperimen.
Mendapatkan kode
Ada beberapa cara untuk mendapatkan kode guna menjalankan Blockly.
Tim Blockly merekomendasikan agar Blockly melalui pengelola paket (seperti NPM atau Yarn) karena:
- Lebih mudah mengikuti perubahan di Blockly
- Mendorong penggunaan plugin alih-alih mem-patching Blockly
NPM
npm install blockly --save
Yarn
yarn add blockly
GitHub
Anda juga dapat mendownload kode yang dikompresi dari Rilis GitHub. Namun, hal ini mengharuskan Anda download kode secara berkala untuk menerima update terbaru dan perbaikan pada Blockly.
Memuat kode
Setelah Anda mendapatkan kode, ada beberapa cara untuk mengaksesnya dari pada kode sumber.
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);