बिल्ड स्क्रिप्ट

Blockly में 100 से ज़्यादा TypeScript फ़ाइलें होती हैं. इन फ़ाइलों को इस्तेमाल करने से पहले, TypeScript कंपाइलर, tsc की मदद से JavaScript में कंपाइल करना ज़रूरी है. इससे उतनी ही संख्या में .js फ़ाइलें बनती हैं जो स्थानीय टेस्टिंग के लिए सही हैं. हालांकि, इतनी बड़ी संख्या में फ़ाइलों को इंटरनेट पर लोड करने से, असली उपयोगकर्ताओं को धीमा अनुभव मिलता है. Blockly को तेज़ी से लोड करने के लिए, Closure Compiler का इस्तेमाल किया जाता है. इससे फ़ाइलों को कंप्रेस (छोटा) किया जाता है और उन्हें छह फ़ाइलों ("बंडल" या "चंक") में मिला दिया जाता है. इन फ़ाइलों का कुल साइज़, कंप्रेस न की गई फ़ाइलों के साइज़ से आधा होता है.

इस प्रोसेस में, ECMAScript की नई सुविधाओं का इस्तेमाल करने वाले कोड को ES6 में ट्रांसपाइल किया जाता है. ऐसा इसलिए किया जाता है, क्योंकि ECMAScript की नई सुविधाएं सभी ब्राउज़र के साथ काम नहीं करती हैं. वहीं, ES6 आम तौर पर सबसे ज़्यादा इस्तेमाल किए जाने वाले ब्राउज़र के साथ काम करता है. इसलिए, यह ज़रूरी है कि आप असली उपयोगकर्ताओं को सिर्फ़ छोटा किया गया कोड दें.

google/blockly repository में सिर्फ़ सोर्स कोड होता है. पहले इसमें बिल्ड प्रॉडक्ट भी शामिल थे, लेकिन 2019 से, छोटे किए गए बंडल blockly NPM पैकेज के तौर पर पब्लिश किए जा रहे हैं. साथ ही, 2022 से इन्हें GitHub की हर रिलीज़ में .tgz फ़ाइल के तौर पर भी अटैच किया जा रहा है. इसलिए, Blockly को तब तक बिल्ड करने की ज़रूरत नहीं है, जब तक कि आप Blockly में ही हैकिंग न कर रहे हों. खास तौर पर, core, blocks, generators या msg डायरेक्ट्री में मौजूद फ़ाइलों में.

Blockly को बनाने, टेस्ट करने, और पब्लिश करने की प्रोसेस को अपने-आप पूरा करने के लिए, npm स्क्रिप्ट का इस्तेमाल किया जाता है. इससे Gulp टास्क को चलाया जा सकता है. इस पेज पर, प्रिंसिपल स्क्रिप्ट और उनके काम करने के तरीके के बारे में बताया गया है.

कंप्रेस किया गया और कंप्रेस नहीं किया गया मोड

टाइपस्क्रिप्ट कंपाइलर से जनरेट की गई अलग-अलग .js फ़ाइलों से सीधे Blockly को लोड करने को "अनकंप्रेस मोड" कहा जाता है. यह कई ऐसे चरणों से बचता है जिनमें समय लगता है. इसलिए, इससे बदलाव करने, कंपाइल करने, और चलाने की प्रोसेस तेज़ी से पूरी होती है. इससे डीबग करने में भी आसानी होती है, क्योंकि एक्ज़ीक्यूट किया जा रहा JavaScript कोड, ओरिजनल TypeScript सोर्स की तरह ही आसानी से पढ़ा जा सकता है. इसलिए, सोर्समैप पर निर्भर रहने की ज़रूरत नहीं होती.

मिनिफ़ाइड बंडलों से Blockly को लोड करने को "कंप्रेस किया गया मोड" कहा जाता है. किसी दूसरे पैकेज की डिपेंडेंसी के तौर पर Blockly का इस्तेमाल करते समय, इसमें किए गए बदलावों की जांच करने का यह सबसे अच्छा तरीका है. ऐसा इसलिए, क्योंकि यह blockly npm पैकेज के (बिना पब्लिश किए गए वर्शन) की जांच करता है.

N.B.: Blockly रिपॉज़िटरी में कुछ ऐसी जगहें हैं जहां "अनकंपाइल मोड" और "कंपाइल मोड" शब्दों का इस्तेमाल, "अनकंप्रेस्ड मोड" और "कंप्रेस्ड मोड" के समानार्थी शब्दों के तौर पर किया गया है. पहले इस शब्द का इस्तेमाल किया जाता था, क्योंकि Closure Compiler का इस्तेमाल कोड को कंप्रेस (छोटा) करने के लिए किया जाता था. हालांकि, अब TypeScript कंपाइलर की हमेशा ज़रूरत होती है. भले ही, कोड कंप्रेस न किया गया हो. इसलिए, इस शब्द का इस्तेमाल करने से भ्रम पैदा हो सकता है. साथ ही, इसका इस्तेमाल न करने की सलाह दी जाती है.

क्विक स्टार्ट

  • अगर आपने स्थानीय बदलाव किए हैं और आपको यह पक्का करना है कि उनसे बिल्ड या किसी भी टेस्ट पर कोई असर नहीं पड़ा है, तो

    npm test

    Blockly बनाने और उसके टेस्ट सुइट को चलाने के लिए.

  • अगर आपको ब्राउज़र में लोकल बदलावों को टेस्ट करना है, तो यह कमांड चलाएं

    npm start

    इससे Blockly कंपाइल हो जाता है. साथ ही, एक वेब ब्राउज़र खुल जाता है, जो Blockly के प्लेग्राउंड की ओर इशारा करता है. यह प्लेग्राउंड, Blockly को बिना कंप्रेस किए गए मोड में चलाता है.

    core/, blocks/, और generators/ में मौजूद जिन फ़ाइलों में बदलाव किया जाता है उन्हें अपने-आप फिर से कंपाइल किया जाता है. बदलाव देखने के लिए, ब्राउज़र टैब को फिर से लोड करें.

  • Blockly के स्थानीय तौर पर बदले गए वर्शन को बनाने और उसे कंप्रेस किए गए मोड में टेस्ट करने के लिए, किसी दूसरे npm पैकेज की डिपेंडेंसी के तौर पर, यह कमांड चलाएं

    npm run package

    Blockly पैकेज बनाने के लिए, फिर

    cd dist && npm link

    npm को यह बताने के लिए कि कंपाइल की गई फ़ाइलें कहां मिलेंगी, और फिर cd अपने प्रोजेक्ट की डायरेक्ट्री में जाकर

    npm link blockly

    ताकि आपका पैकेज, पब्लिश किए गए blockly पैकेज के बजाय, Blockly के नए कंपाइल किए गए वर्शन का इस्तेमाल कर सके.

स्क्रिप्ट के बारे में पूरी जानकारी

इस सेक्शन में, Blockly की package.json फ़ाइल में मौजूद सिद्धांत scripts की सूची दी गई है. साथ ही, यह भी बताया गया है कि ये सिद्धांत क्या करते हैं.

ये स्क्रिप्ट, दो जगहों पर फ़ाइलें जनरेट करती हैं:

  • build/ सबडायरेक्ट्री में मौजूद फ़ाइलें, इंटरमीडियरी फ़ाइलें होती हैं. इनका इस्तेमाल लोकल टेस्टिंग के लिए किया जाता है. इसके अलावा, इन्हें बिल्ड पाइपलाइन के बाद के हिस्सों में शामिल किया जाता है.
  • dist/ सबडायरेक्ट्री में मौजूद फ़ाइलें, पब्लिश किए गए npm पैकेज का कॉन्टेंट बनाती हैं.

इनमें से किसी भी डायरेक्ट्री को Blockly की Git रिपॉज़िटरी में ट्रैक नहीं किया जाता.

clean

npm run clean पिछली सभी बिल्ड को क्लीन करता है. इसके लिए, यह build/ और dist/ डायरेक्ट्री मिटा देता है. यह खास तौर पर, सोर्स फ़ाइल का नाम बदलने की वजह से होने वाली बिल्ड फ़ेल होने की समस्याओं को ठीक करने के लिए उपयोगी है.

messages

npm run messages, msg/messages.js में किए गए किसी भी बदलाव के साथ msg/json/ में मौजूद मैसेज फ़ाइलों को अपडेट करता है. साथ ही, इस फ़ाइल में बदलाव होने के बाद इसे हर बार चलाना चाहिए.

langfiles

npm run langfiles, msg/json में मौजूद मैसेज फ़ाइलों से build/msg/ में कंपाइल की गई भाषा की फ़ाइलें जनरेट करता है.

tsc

npm run tsc, blocks/, और generators/ डायरेक्ट्री के कॉन्टेंट पर TypeScript कंपाइलर चलाता है. साथ ही, build/src/ में अलग-अलग .js फ़ाइलें आउटपुट करता है.core/

minify

npm run minify, closure-make-deps, और closure-calculate-chunks को कंपाइल की गई .js फ़ाइलों को छोटे-छोटे हिस्सों (मिनिफ़ाइड बंडल) में बांटने का तरीका तय करने के लिए चलाया जाता है. इसके बाद, closure-compiler को इन हिस्सों को इस तरह से बनाने के लिए चलाया जाता है:

  • build/src/core/ का कॉन्टेंट dist/blockly_compressed.js बन जाता है.
  • build/src/blocks/ का कॉन्टेंट dist/blocs_compressed.js बन जाता है.
  • build/src/generators/javascript/ (प्लस build/src/generators/javascript.js) का कॉन्टेंट dist/javascript_compressed.js बन जाता है.
  • इसी तरह, dart, lua, php, और python के लिए भी ऐसा ही किया जाता है.

जनरेट किए गए चंक, यूनिवर्सल मॉड्यूल डेफ़िनिशन के साथ काम करने के लिए रैपर का इस्तेमाल करते हैं. इसलिए, पैकेज में शामिल करने से पहले, उन्हें किसी अतिरिक्त प्रोसेसिंग की ज़रूरत नहीं होती.

build

npm run build, minify और langfiles टास्क को चलाता है. इससे कंप्रेस किए गए या कंप्रेस न किए गए मोड में Blockly Playground को लोड करने के लिए ज़रूरी सभी काम हो जाने चाहिए.

package

npm run package, clean और build टास्क को पूरा करता है. इसके बाद:

  • यह build/msg/ में मौजूद फ़ाइलों पर UMD रैपर लागू करता है. साथ ही, रैप किए गए वर्शन को dist/msg/ में रखता है.
  • यह dist/ में कई अन्य सहायता फ़ाइलें जोड़ता है. साथ ही, जहां लागू हो वहां UMD रैपर जोड़ता है.

publish

npm run publish का इस्तेमाल Blockly टीम, blockly npm पैकेज को पब्लिश करने के लिए करती है. यह Google के इंटरनल इन्फ़्रास्ट्रक्चर पर निर्भर करता है. इसलिए, यह बाहरी डेवलपर के लिए काम का नहीं है.

lint

npm run lint ESLint चलाता है. यह Blockly के सोर्स कोड का स्टैटिक विश्लेषण करता है, ताकि समस्याओं का पता लगाया जा सके.

test

npm test (या npm run test) package टास्क को चलाता है. इसके बाद, कई अपने-आप होने वाले टेस्ट चलाता है. इनमें ESLint चलाना भी शामिल है. इसे ब्लॉकली रिपॉज़िटरी के ख़िलाफ़ पुल अनुरोध के तौर पर सबमिट किए गए किसी भी कोड पर चलाया जाना चाहिए और पास किया जाना चाहिए.