Blockly kodunu almanın ve yüklemenin birkaç yolu vardır öğrenebilirsiniz.
Paket komut dosyası oluşturma
Blockly, bir başlangıç uygulamasını önyükleyen bir komut dosyası sağlar. Bu komut dosyasını kullanarak ve sonra değiştirin. Webpack ve Chrome web paketi gibi yaygın web geliştirme araçlarını kullanır. eslint içeriyor, ancak React veya Angular gibi bir çerçeve içermiyor.
Bunun için, çalıştırmadan önce düğüm.js ve npm'yi yüklemeniz gerekir komutudur.
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'te 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 bir paket.json dosyası oluşturarak güncel müzikleri kolayca kontrol edebilirsiniz. kullanın.
Ayrıca, projeyi test etmek için bir komut dosyası gibi, bazı kullanışlı yerel olarak:
cd hello-world
npm run start
Diğer komutlar için oluşturulan package.json dosyasına bakabilirsiniz.
Pkt'yi kaldır
Yalnızca yeni fikirlerle uğraşıyorsanız ve uygulamasında, komut dosyası etiketlerini kullanarak unpkg'dan Blockly'yi yükleyebilirsiniz.
Aşağıdakini herhangi bir HTML sayfasına eklerseniz HTML'yi doğrudan farklı bir tarayıcı kullanın:
<!-- 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, Blockly'yi edinmek için uzun vadeli bir çözüm değildir çünkü webpack gibi paketleyicilerle çalışır, ancak prototip oluşturma ve olanak sağlar.
Kodu alın
Blockly'yi çalıştırmak için kodu almanın birkaç yolu vardır.
Blockly ekibi, bir paket yöneticisi (ör. AİOY veya Yarn) şu nedenlerledir:
- Blockly'deki değişiklikleri takip etmek artık daha kolay
- Blockly'de monkeyyama 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ış kodu şuradan indirebilirsiniz: GitHub sürümleri. Ancak bunun için manuel olarak en son güncellemeleri almak için kodu düzenli aralıklarla indirin. ve Blockly'deki düzeltmeler.
Kodu yükle
Kodu aldıktan sonra, Google Hesaplarına giderek girin.
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;
İç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';
İleti dosyalarını içe aktardığınızda bunları da uygulamanız gerekir.
Blockly.setLocale(En);
Gereken
// 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);