Blockly kodunu almanın ve aldıktan sonra yüklemenin birkaç yolu vardır.
Create-package komut dosyası
Blockly, başlangıç uygulamasını başlatan ve daha sonra değiştirebileceğiniz bir komut dosyası sağlar. Webpack ve eslint gibi yaygın web geliştirme araçlarını kullanır ancak React veya Angular gibi bir çerçeve içermez.
Bunun için aşağıdaki komutları çalıştırmadan önce node.js ve npm'yi yüklemeniz gerekir.
Yeni bir hello-world dizininde JavaScript ile yazılmış bir uygulama oluşturmak için:
npx @blockly/create-package app hello-world
Yeni bir hello-world dizininde TypeScript ile yazılmış bir uygulama oluşturmak için:
npx @blockly/create-package app hello-world --typescript
Bunlar, paket hedeflerini içe aktaran bir paket oluşturur. Ayrıca, bağımlılıklarını yönetmek için bir package.json dosyası kullanır. Bu sayede Blockly'nin en son sürümünü kullanmaya devam edebilirsiniz.
Ayrıca, projeyi yerel olarak tarayıcıda test etmek için kullanabileceğiniz gibi bazı kullanışlı başlangıç komut dosyaları da mevcuttur:
cd hello-world
npm run start
Diğer komutlar için oluşturulan package.json dosyasına bakabilirsiniz.
Unpkg
Yalnızca fikirlerle uğraşıyorsanız ve tam bir uygulamayı başlatmak istemiyorsanız komut dosyası etiketlerini kullanarak Blockly'yi unpkg'den yükleyebilirsiniz.
Aşağıdakileri herhangi bir HTML sayfasına eklerseniz Blockly ile denemeler yapmak için HTML'yi doğrudan bir tarayıcıda açabilirsiniz:
<!-- 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>
Webpack gibi paketleyicilerle çalışmadığı için Blockly'yi edinmek için uzun vadede iyi bir çözüm değildir ancak prototip oluşturma ve deneme için iyidir.
Kodu alın
Blockly'yi çalıştırmak için kodu edinmenin birkaç yolu vardır.
Blockly ekibi, Blockly'yi bir paket yöneticisi (ör. NPM veya Yarn) aracılığıyla yüklemenizi önerir. Bunun nedeni:
- Blockly'deki değişikliklerden haberdar olmak daha kolaydır
- Blockly'de kod değiştirmek yerine eklentileri kullanmayı teşvik eder.
AİOY
npm install blockly --save
Yumak
yarn add blockly
GitHub
Sıkıştırılmış kodu GitHub sürümlerimizden de indirebilirsiniz. Ancak bu durumda, Blockly'deki en son güncellemeleri ve düzeltmeleri almak için kodu düzenli aralıklarla manuel olarak indirmeniz gerekir.
Kodu yükleme
Kodu aldıktan sonra, kodunuzdan birkaç şekilde erişebilirsiniz.
Komut dosyası etiketleri
<!-- 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>
Komut dosyası etiketlerini kullanırken global ad alanından içe aktarılanlara erişebilirsiniz:
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.libraryBlocks['block_type'];
// Access the generator.
javascript.javascriptGenerator;
İçe aktarılanlar
// 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';
Mesaj dosyalarını içe aktarırken bunları da uygulamanız gerekir.
Blockly.setLocale(En);
Gereken sürüm
// 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');
Mesaj dosyalarına ihtiyaç duyduğunuzda bunları da uygulamanız gerekir.
Blockly.setLocale(En);