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

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

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

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

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

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

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

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

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

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

चेतावनी: अगर आपको सीधे Blockly के सोर्स कोड में बदलाव नहीं करना है, तो हो सकता है कि आपको यहां दी गई किसी भी स्क्रिप्ट को खुद बनाने की ज़रूरत न पड़े. इसके बजाय, blockly NPM पैकेज इंस्टॉल करने के लिए, शुरू करें पेज के "कोड पाएं" सेक्शन में दिए गए निर्देशों का पालन करें या GitHub पर मौजूद सबसे नई रिलीज़ से जुड़ी .tgz फ़ाइल डाउनलोड करें.

अगर आपने स्थानीय बदलाव किए हैं और आपको यह पक्का करना है कि उनसे बिल्ड या किसी भी टेस्ट पर असर न पड़ा हो, तो
```
npm test
```
Blockly को बनाने और उसका टेस्ट सुइट चलाने के लिए.
अगर आपको ब्राउज़र में लोकल बदलावों की जांच करनी है, तो
```
npm start
```
इससे Blockly को कंपाइल किया जाता है और एक वेब ब्राउज़र खुलता है, जो Blockly के बिना कंप्रेस किए गए मोड में चलने वाले Blockly प्लेग्राउंड पर ले जाता है.

core/, blocks/, और generators/ में मौजूद जिन फ़ाइलों में बदलाव किया गया है वे अपने-आप फिर से कंपाइल हो जाती हैं. बदलाव देखने के लिए, ब्राउज़र टैब को फिर से लोड करें.
Blockly के स्थानीय तौर पर बदले गए वर्शन को बनाने और उसे किसी दूसरे npm पैकेज की डिपेंडेंसी के तौर पर, संपीड़ित मोड में टेस्ट करने के लिए,
```
npm run package
```
ब्लॉकली पैकेज बनाने के लिए, इसके बाद
```
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/json/ की मैसेज फ़ाइलों को msg/messages.js में किए गए किसी भी बदलाव के साथ अपडेट करता है. साथ ही, फ़ाइल में हर बार बदलाव किए जाने के बाद, इन्हें चलाया जाना चाहिए.

`langfiles`

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

`tsc`

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

`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`

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

`lint`

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

`test`

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