Blockly's Derleme Komut Dosyaları

Blockly, yüzden fazla TypeScript dosyasından oluşur. Bunların derlenmesi gerekir tsc tarafından JavaScript'e aktarılmadan önce JavaScript'e aktarılmadan önce kullanılır. Bu işlem, yerel test için uygun olan eşit sayıda .js dosyası oluşturur ancak bu kadar çok dosyayı internet üzerinden yüklemek son kullanıcılar için yavaş bir deneyimdir. Blockly'nin daha hızlı yüklenmesini sağlamak için Closure Compiler (Closure Compiler) şu amaçlarla kullanılır: sıkıştırarak (küçülterek) onları yarım düzine dosyaya ("paketler" veya "parçalar"). Toplam boyut, sıkıştırılmamış dosyaların yarısından küçüktür.

Bu süreçte, en son ECMAScript özelliklerini kullanan kod (tüm tarayıcılarla uyumlu olmayabilir) genellikle en yaygın kullanılan tarayıcılarla uyumlu olan ES6'ya aktarılır. Bu nedenle, son kullanıcılarınıza yalnızca sıkıştırılmış kodu sunmanız önemlidir.

google/blockly deposu yalnızca kaynak kodu içerir. Önceden aynı zamanda derleme ürünleri, Ancak 2019'dan beri küçültülmüş paketler blockly NPM paketi ve tarihinden bu yana 2022, her GitHub sürümüne .tgz dosyası olarak da eklendiğinden gerek yoktur. (özellikle de Blockly'nin kendisinde bir şeyler saldırmıyorsanız) core, blocks, generators veya msg dizinlerindeki dosyaları kullanın.

Blockly'yi derleme, test etme ve yayınlama işlemi, Gulp görevlerini çalıştırmak için npm komut dosyaları kullanılarak otomatikleştirilir. Bu sayfada ana komut dosyaları ve şeylerden biri.

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

Blockly'yi doğrudan.js TypeScript derleyicisi, "sıkıştırılmamış mod" olarak adlandırılır. Bu yöntem, birkaç yavaş derleme adımını atladığından hızlı bir düzenleme-derleme-çalıştırma döngüsü sağlar. Ayrıca, yürütülen JavaScript kodu neredeyse orijinal TypeScript kaynakları kadar okunaklı olduğundan kaynak eşlemelerine bağımlı olma ihtiyacını ortadan kaldırarak hata ayıklamayı da kolaylaştırır.

Küçültülmüş paketlerden Blockly'nin yüklenmesi "sıkıştırılmış mod" olarak adlandırılır. blocklynpm paketini (yayınlanmamış bir sürümünü) test ettiğinden, Blockly'yi başka bir paketin bağımlılığı olarak kullanırken yapılan değişiklikleri test etmenin en iyi yolu budur.

N.B.: Blok depoda, terimlerin girildiği bazı yerlerde "derlenmemiş mod" ve "derlenmiş mod" "sıkıştırılmamış" teriminin eş anlamlısı olarak kullanılır modu" ve "sıkıştırılmış mod" tıklayın. Kodu sıkıştırmak (küçültmek) için Closure Compiler'ın kullanıldığı geçmişte bu kullanım mantıklıydı ancak artık sıkıştırılmamış modda bile TypeScript derleyicisine her zaman ihtiyaç duyulduğundan bu alternatif terminoloji kafa karıştırıcı olabilir ve kullanılması önerilmez.

Hızlı Başlangıç

  • Yerel değişiklikler yaptıysanız ve bu değişikliklerin tüm değişiklikleri,

    npm test

    Blockly'yi derleyip test paketini çalıştırın.

  • Yerel değişiklikleri tarayıcıda test etmek istiyorsanız

    npm start

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

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

  • Yerel olarak değiştirilmiş Blockly sürümünüzü oluşturmak ve sıkıştırılmış modda, başka bir npm paketinin bağımlılığı olarak test etmek için

    npm run package

    bloke etmek için

    cd dist && npm link

    npm'ye, derlenen dosyaları nerede bulacağını bildirir ve ardından cd projenizin çalıştırmadan önce dizini

    npm link blockly

    paketinizin Blok'un yeni derlenmiş sürümünü kullanmasını sağlamak için yer alır.blockly

Ayrıntılı Komut Dosyası Referansı

Bu bölümde, Blockly'nin package.json dosyasında bulunan scripts prensibi ve bu prensiplerin işlevleri 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 beslenen ara dosyalardır.
  • dist/ alt dizinindeki dosyalar, yayınlanan npm paketinin içeriğini oluşturur.

Bu dizinlerin hiçbiri blockly git deposunda izlenmez.

clean

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

messages

npm run messages, msg/json/ klasöründeki ileti dosyalarını yapılan değişikliklerle günceller msg/messages.js için yapılmış olan ve her seferinde sonra çalıştırılması gereken dosya değiştirildiğinden emin olun.

langfiles

npm run langfiles, derlenen dil dosyalarını build/msg/ konumunda oluşturur msg/json klasöründeki ileti dosyalarından.

tsc

npm run tsc, core/ içeriğinde TypeScript derleyicisini çalıştırır, blocks/ ve generators/ dizinlerini oluşturur ve ayrı ayrı .js dosyalarını çıkarır build/src/ adlı konuma.

minify

npm run minify, closure-make-deps ve closure-calculate-chunks koşularını yapar kullanarak, derlenen .js dosyalarının parçalara (küçültülmüş) nasıl bölüneceğini belirlemek için paketleri), ardından closure-compiler öğesini çalıştırarak parçaları şöyle olur:

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

Oluşturulan gruplar, Universal'la uyumlu olmasını sağlamak için Modül Tanımı'nı seçin. Böylece, gereken bilgileri içerir.

build

npm run build, minify ve langfiles görevlerini çalıştırır. Bu işlemin yapması gerekenler: Blockly oyun alanını sıkıştırılmış veya açık bir şekilde yüklemek için gereken her şey veya sıkıştırılmamış modda kullanılabilir.

package

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

  • Dosyalara bir UMD sarmalayıcı uygular build/msg/ (sarmalanmış sürümler dist/msg/ içine yerleştiriliyor).
  • Uygun olduğunda UMD sarmalayıcıları ile dist/ dosyasına çeşitli ek destek dosyaları ekler.

publish

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

lint

npm run lint, sorunları bulmak için Blockly kaynak kodunun statik analizini gerçekleştiren 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 (ESLint çalıştırmak dahil) Bu proje devam etmeli ve devredilmelidir. blok kod deposuna karşı pull isteği olarak gönderilen tüm kodlar.