Blockly's Derleme Komut Dosyaları

Blockly, yüzden fazla TypeScript dosyasından oluşur. Bunların kullanılabilmesi için önce TypeScript derleyicisi (tsc) tarafından JavaScript'e derlenmeleri gerekir. Bu, yerel testler için uygun olan eşit sayıda .js dosyası oluşturur ancak bu kadar çok sayıda dosyanın internet üzerinden yüklenmesi son kullanıcılar için uzun bir deneyimdir. Blockly'nin daha hızlı yüklenmesini sağlamak için Closure Compiler, bunları sıkıştırmak (küçültmek) ve toplam boyutu sıkıştırılmamış dosyaların yarısından az olan yarım düzine dosya ("gruplar" veya "parçalar") halinde birleştirmek için kullanılır.

Bu süreçte, ECMAScript özelliklerini (tüm tarayıcılarla uyumlu olmayabilecek) kullanan kodlar, genellikle yaygın olarak kullanılan tarayıcıların çoğuyla uyumlu olan ES6'ya aktarılır. Dolayısıyla, son kullanıcılarınıza yalnızca küçültülmüş kodu sunmanız önemlidir.

google/blockly deposu yalnızca kaynak kodunu içerir. Daha önce derleme ürünlerini de içeriyordu ancak 2019'dan beri küçültülmüş paketler, blockly NPM paketi olarak yayınlanmış ve 2022'den beri her GitHub sürümüne .tgz dosyası olarak eklenmiş. Bu nedenle, özellikle core, blocks, generators veya msg dizinlerindeki dosyalara yönelik olarak Blockly'ye saldırmıyorsanız Blockly'yi derlemenize gerek yoktur.

Blockly'yi derleme, test etme ve yayınlama süreci, Gulp görevlerini çalıştırmak için npm komut dosyaları kullanılarak otomatikleştirilir. Bu sayfada, ilke komut dosyaları ve her birinin işlevi açıklanmaktadır.

Sıkıştırılmış ve Sıkıştırılmamış Mod

Blockly'yi doğrudan TypeScript derleyicisi tarafından oluşturulan bağımsız .js dosyalarından yüklemek "sıkıştırılmamış mod" olarak adlandırılır. Birkaç yavaş derleme adımını ortadan kaldırarak hızlı bir düzenleme-derleme-çalıştırma döngüsünü kolaylaştırır. Yürütülen JavaScript kodu, orijinal TypeScript kaynakları kadar okunabilir olduğundan hata ayıklamayı da kolaylaştırır. Böylece kaynak haritalarına bağımlı olma ihtiyacını da ortadan kaldırır.

Küçültülmüş gruplardan Blockly yüklemesi, "sıkıştırılmış mod" olarak adlandırılır. Başka bir paketin bağımlılığı olarak kullanırken Blockly'de yapılan değişiklikleri test etmenin en iyi yolu budur. Çünkü blockly npm paketini test eder (yayınlanmamış bir sürümü).

N.B.: Blok depoda "derlenmemiş mod" ve "derlenmiş mod" terimleri, sırasıyla "sıkıştırılmamış mod" ve "sıkıştırılmış mod" ile eş anlamlı olarak kullanıldığı bazı yerler vardır. Geçmişte bu kullanım anlamlıydı. Closure Compiler, kodu sıkıştırmak (küçültmek) için kullanılıyordu. Ancak, artık türü sıkıştırılmamış modda bile, artık TypeScript derleyicisine ihtiyaç duyuluyor. Bu nedenle, bu alternatif terminoloji kafa karıştırıcı olabilir ve kullanılması tavsiye edilmez.

Hızlı Başlangıç Kılavuzu

  • Yerel değişiklikler yaptıysanız ve bunların derlemeyi veya herhangi bir testi bozmadığından emin olmak istiyorsanız

    npm test

    ve test paketini çalıştırın.

  • Tarayıcıdaki yerel değişiklikleri test etmek istiyorsanız

    npm start

    Bu işlem, Blockly'yi derler ve Blockly'yi sıkıştırılmamış modda çalıştıran Blockly oyun alanını işaret eden bir web tarayıcısı açar.

    core/, blocks/ ve generators/ ürünlerinde değiştirilen tüm dosyalar otomatik olarak yeniden derlenir. Değişiklikleri görmek için tarayıcı sekmesini yeniden yükleyin.

  • Blockly'nin yerel olarak değiştirilmiş sürümünü derleyip sıkıştırılmış modda başka bir npm paketinin bağımlılığı olarak test etmek için

    npm run package

    ve daha sonra,

    cd dist && npm link

    çalıştırmadan önce npm'ye derlenen dosyaları nerede bulacağını ve ardından cd işlemini projenizin dizinine

    npm link blockly

    paketinizin, yayınlanan blockly paketinin yerine Blockly'nin yeni derlenmiş sürümünü kullanmasını sağlamanız gerekir.

Ayrıntılı Komut Dosyası Referansı

Bu bölümde, Blockly'nin package.json dosyasındaki scripts ilkesinin ne işe yaradığı açıklanmaktadır.

Bu komut dosyaları iki yerde dosya oluşturur:

  • build/ alt dizinindeki dosyalar, yerel test için kullanılan veya derleme ardışık düzeninin sonraki bölümleri tarafından alınan ara dosyalardır.
  • dist/ alt dizinindeki dosyalar, yayınlanan npm paketinin içeriğini oluşturur.

İki dizin de blok halinde git deposunda izlenmez.

clean

npm run clean, build/ ve dist/ dizinlerini silerek önceki derlemeleri temizler. Özellikle kaynak dosyanın yeniden adlandırılmasından kaynaklananlar olmak üzere gizli derleme hatalarını düzeltmek için kullanışlıdır.

messages

npm run messages, msg/json/ içindeki mesaj dosyalarını msg/messages.js üzerinde yapılan değişikliklerle günceller ve ilgili dosya her değiştirildiğinden sonra çalıştırılmalıdır.

langfiles

npm run langfiles, msg/json içindeki mesaj dosyalarından build/msg/ dilinde derlenen dil dosyalarını oluşturur.

tsc

npm run tsc, TypeScript derleyicisini core/, blocks/ ve generators/ dizinlerinin içeriğinde çalıştırır ve build/src/ dosyasına bağımsız .js dosyalarını verir.

minify

npm run minify, derlenen .js dosyalarının parçalara (küçültülmüş paketler) nasıl bölüneceğini belirlemek için closure-make-deps ve closure-calculate-chunks değerlerini çalıştırır. Ardından, aşağıdaki gibi parçalar oluşturmak için closure-compiler komutunu çalıştırır:

  • build/src/core/ içeriği dist/blockly_compressed.js olur.
  • build/src/blocks/ içeriği dist/blocs_compressed.js olur.
  • build/src/generators/javascript/ içeriği (artı build/src/generators/javascript.js) dist/javascript_compressed.js olur.
  • Aynı şekilde dart, lua, php ve python için de geçerlidir.

Oluşturulan kümeler, Evrensel Modül Tanımı ile uyumluluğu sağlamak için bir sarmalayıcı kullanır. Böylece, pakete dahil edilmeden önce ek işlem yapılması gerekmez.

build

npm run build, minify ve langfiles görevlerini çalıştırır. Bu işlem, Blockly oyun alanını sıkıştırılmış veya sıkıştırılmamış modda yüklemek için gereken her şeyi yapar.

package

npm run package, clean ve build görevlerini çalıştırır ve ardından:

  • build/msg/ içindeki dosyaları dist/msg/ içine yerleştirerek bir UMD sarmalayıcı uygular.
  • Uygun durumlarda UMD sarmalayıcılarıyla birlikte dist/ öğesine çeşitli ek destek dosyaları ekler.

publish

npm run publish, Blockly ekibi tarafından blockly npm paketini yayınlamak için kullanılır. Bu, Google'ın dahili altyapısına bağlı olduğundan harici geliştiriciler için faydalı değildir.

lint

npm run lint, sorunları bulmak için Blockly kaynak kodunun statik analizini yapan ESLint'i çalıştırır.

test

npm test (veya npm run test) package görevini çalıştırır ve ardından çeşitli otomatik testler çalıştırır (ESLint'in çalıştırılması dahil). Bu, bloklu depoya karşı pull isteği olarak gönderilen tüm kodlar üzerinde çalıştırılmalı ve geçmelidir.