ब्लॉक रूप से स्क्रिप्ट बनाएं

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

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

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

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

कंप्रेस्ड और अनकंप्रेस्ड मोड

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

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

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

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

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

    npm test

    ब्लॉकली बनाने और इसके टेस्ट सुइट को चलाने में मदद करता है.

  • यदि आप ब्राउज़र में स्थानीय परिवर्तनों का परीक्षण करना चाहते हैं, तो

    npm start

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

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

  • ब्लॉकली का लोकल तौर पर बदला गया वर्शन बनाने और इसकी जांच करने के लिए, किसी अन्य एनपीएम पैकेज की डिपेंडेंसी के तौर पर, कंप्रेस किए गए मोड में

    npm run package

    ब्लॉकली पैकेज बनाने के बाद ही,

    cd dist && npm link

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

    npm link blockly

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

विस्तृत स्क्रिप्ट संदर्भ

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

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

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

ब्लॉक किए गए गिट के डेटा स्टोर करने की जगह में, किसी भी डायरेक्ट्री को ट्रैक नहीं किया जाता.

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, core/, blocks/, और generators/ डायरेक्ट्री के कॉन्टेंट पर टाइपस्क्रिप्ट कंपाइलर चलाता है. साथ ही, अलग-अलग .js फ़ाइलों को build/src/ में भेजता है.

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 टास्क चलाता है. इससे ब्लॉकली प्लेग्राउंड को कंप्रेस किए गए या बिना कंप्रेस किए मोड में लोड करने के लिए सभी ज़रूरी काम किए जाने चाहिए.

package

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

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

publish

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

lint

npm run lint, ESLint चलाता है और ब्लॉकली सोर्स कोड का स्टैटिक विश्लेषण करता है, ताकि गड़बड़ियों का पता लगाया जा सके.

test

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