कोड प्राप्त करें

Blockly कोड पाने के कई तरीके हैं. साथ ही, इसे पाने के बाद लोड करने के भी कई तरीके हैं.

Create-package स्क्रिप्ट

Blockly, स्टार्टर ऐप्लिकेशन को बूटस्ट्रैप करने के लिए एक स्क्रिप्ट उपलब्ध कराता है. इसमें बाद में बदलाव किया जा सकता है. यह webpack और eslint जैसे सामान्य वेब डेवलपमेंट टूल का इस्तेमाल करता है. हालांकि, इसमें React या Angular जैसे फ़्रेमवर्क शामिल नहीं होते.

इसके लिए, आपको यहां दी गई कमांड चलाने से पहले, node.js और npm इंस्टॉल करना होगा.

नई hello-world डायरेक्ट्री में JavaScript में लिखा गया ऐप्लिकेशन बनाने के लिए:

npx @blockly/create-package app hello-world

नई hello-world डायरेक्ट्री में TypeScript में लिखा गया ऐप्लिकेशन बनाने के लिए:

npx @blockly/create-package app hello-world --typescript

इनसे ऐसा पैकेज बनता है जो पैकेज के टारगेट इंपोर्ट करता है. यह डिपेंडेंसी मैनेज करने के लिए, package.json फ़ाइल का भी इस्तेमाल करता है. इससे Blockly के नए वर्शन को अपडेट करना आसान हो जाता है.

इसमें कुछ काम की स्टार्टर स्क्रिप्ट भी शामिल हैं. जैसे, प्रोजेक्ट को ब्राउज़र में स्थानीय तौर पर टेस्ट करने के लिए स्क्रिप्ट:

cd hello-world
npm run start

अन्य कमांड के लिए, जनरेट की गई package.json फ़ाइल देखें.

Unpkg

अगर आपको सिर्फ़ कुछ आइडिया आज़माने हैं और पूरा ऐप्लिकेशन बूटस्ट्रैप नहीं करना है, तो स्क्रिप्ट टैग का इस्तेमाल करके unpkg से Blockly लोड किया जा सकता है.

अगर किसी एचटीएमएल पेज में यह कोड जोड़ा जाता है, तो एचटीएमएल को सीधे ब्राउज़र में खोला जा सकता है, ताकि Blockly को आज़माया जा सके:

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

Blockly को पाने के लिए, यह लंबे समय तक काम करने वाला अच्छा तरीका नहीं है. ऐसा इसलिए, क्योंकि यह webpack जैसे बंडलर के साथ काम नहीं करता. हालांकि, यह प्रोटोटाइपिंग और एक्सपेरिमेंट के लिए अच्छा है.

कोड प्राप्त करें

Blockly को चलाने के लिए, कोड पाने के कई तरीके हैं.

Blockly टीम का सुझाव है कि पैकेज मैनेजर (जैसे, NPM या Yarn) के ज़रिए Blockly को शामिल किया जाए. इसकी वजह यह है कि:

• Blockly में हुए बदलावों के बारे में अप-टू-डेट रहना आसान है
• यह Blockly में मंकीपैचिंग करने के बजाय, प्लगिन इस्तेमाल करने को बढ़ावा देता है

NPM

npm install blockly --save

ऊन

yarn add blockly

GitHub

कंप्रेस किया गया कोड, हमारे GitHub रिलीज़ से भी डाउनलोड किया जा सकता है. हालांकि, इसके लिए आपको समय-समय पर कोड को मैन्युअल तरीके से डाउनलोड करना होगा, ताकि Blockly से जुड़े नए अपडेट और सुधार मिल सकें.

चेतावनी: Github से डाउनलोड करने की सुविधा सिर्फ़ उन डेवलपर के लिए उपलब्ध है जो पहले Blockly को फ़ोर्क कर रहे थे. अगर आप नए डेवलपर हैं, तो आपको पैकेज मैनेजर

का इस्तेमाल करना चाहिए.

कोड लोड करना

कोड मिलने के बाद, इसे कई तरीकों से ऐक्सेस किया जा सकता है.

स्क्रिप्ट टैग

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

स्क्रिप्ट टैग का इस्तेमाल करते समय, ग्लोबल नेमस्पेस से इंपोर्ट किए गए आइटम को ऐक्सेस किया जा सकता है:

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

ध्यान दें: स्क्रिप्ट टैग का इस्तेमाल करते समय, आपके पास एक से ज़्यादा मैसेज फ़ाइलें नहीं हो सकतीं, क्योंकि मैसेज सीधे Blockly.Msg ऐरे पर लागू होते हैं.

आयात

ध्यान दें: हमारे पैकेज के टारगेट इंपोर्ट करने के लिए, आपको बंडलर (जैसे कि webpack) का इस्तेमाल करना होगा. ऐसा इसलिए, क्योंकि Blockly को ESM के बजाय UMD के तौर पर पैकेज किया जाता है.

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

मैसेज फ़ाइलें इंपोर्ट करने के बाद, आपको उन्हें लागू भी करना होगा.

Blockly.setLocale(En);

ज़रूरी है

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

मैसेज फ़ाइलों की ज़रूरत पड़ने पर, आपको उन्हें लागू भी करना होगा.

Blockly.setLocale(En);