Blockly'yi indir

Blockly kodunu almanın ve aldıktan sonra yüklemenin çeşitli yolları vardır.

Paket komut dosyası oluşturma

Blockly, bir başlangıç uygulamasını önyükleyen bir komut dosyası sağlar. Bu dosyayı daha sonra değiştirebilirsiniz. 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'te 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ı yönetmek için birpackage.json dosyası kullanır. Bu sayede, Blockly'nin son sürümünü kolayca takip edebilirsiniz.

Ayrıca, projeyi bir tarayıcıda yerel olarak test etmek için bir komut dosyası gibi bazı kullanışlı başlangıç komut dosyaları da içerir:

cd hello-world
npm run start

Diğer komutlar için, oluşturulan paket.json dosyasına bakabilirsiniz.

Paketlenmemiş

Fikirlerle uğraşıyor ve bir uygulamayı tam olarak önyüklemek istemiyorsanız komut dosyası etiketlerini kullanarak unpkg'dan Blockly'yi yükleyebilirsiniz.

Herhangi bir HTML sayfasına aşağıdakileri eklerseniz, Blockly ile deneme 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>

Bu, Webpack gibi paketleyicilerle çalışmadığı için Blockly'yi satın almak için uzun vadeli iyi bir çözüm değildir, ancak prototip oluşturma ve deneme için faydalıdır.

Kodu alın

Kodun Blockly'yi çalıştırmasını sağlamanın birkaç yolu vardır.

Blockly ekibi, aşağıdaki nedenlerle bir paket yöneticisi (NPM veya Yarn gibi) aracılığıyla Blockly'yi zorunlu kılmanızı önerir:

• Blockly'deki değişikliklerden haberdar olmak daha kolay
• Blockly'yi monkeypatch uygulamak yerine eklentilerin kullanılmasını teşvik eder

AİOY

npm install blockly --save

İplik

yarn add blockly

GitHub

Sıkıştırılmış kodları GitHub sürümlerimizden de indirebilirsiniz. Ancak bu, Blockly ile ilgili en son güncellemeleri ve düzeltmeleri almak için kodu düzenli aralıklarla manuel olarak indirmenizi gerektirir.

Uyarı: GitHub indirmeleri yalnızca daha önce Blockly'yi çatallayan geliştiricilere kolaylık sağlamak amacıyla sağlanır. Yeni bir geliştiriciyseniz paket yöneticisi kullanmanız gerekir.

Kodu yükle

Kodu aldıktan sonra, bu koda 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 içe aktarma işlemlerine genel ad alanından erişebilirsiniz:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

Not: Komut dosyası etiketlerini kullanırken mesajlar doğrudan Blockly.Msg dizisine uygulandığından birden fazla mesaj dosyanız olamaz.

İçe Aktarımlar

Not: Blockly, ESM yerine bir UMD olarak paketlendiğinden paket hedeflerimizin içe aktarmalarını kullanmak için bir paketleyici (webpack gibi) kullanmanız gerekir.

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

İleti dosyalarını içe aktardığınızda bunları da uygulamanız gerekir.

Blockly.setLocale(En);

Gerekenler

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

İleti dosyalarını zorunlu kıldığınızda bunları da uygulamanız gerekir.

Blockly.setLocale(En);