کد را دریافت کنید

چندین راه برای دریافت کد Blockly و چندین راه برای بارگذاری آن پس از دریافت وجود دارد.

اسکریپت ایجاد بسته

Blockly اسکریپتی ارائه می‌دهد که یک برنامه‌ی اولیه را بوت‌استرپ می‌کند و سپس می‌توانید آن را تغییر دهید. این ابزار از ابزارهای رایج توسعه‌ی وب مانند webpack و eslint استفاده می‌کند، اما شامل فریم‌ورکی مانند React یا Angular نمی‌شود.

این امر مستلزم آن است که قبل از اجرای دستورات زیر ، node.js و npm را نصب کنید .

برای ایجاد یک برنامه نوشته شده با جاوا اسکریپت در یک دایرکتوری جدید hello-world :

npx @blockly/create-package app hello-world

برای ایجاد یک برنامه نوشته شده با TypeScript در یک دایرکتوری جدید hello-world :

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

این‌ها بسته‌ای ایجاد می‌کنند که اهداف بسته را وارد می‌کند . همچنین از یک فایل package.json برای مدیریت وابستگی‌ها استفاده می‌کند که به‌روزرسانی به آخرین نسخه Blockly را آسان می‌کند.

همچنین با چند اسکریپت شروع مفید، مانند اسکریپتی برای آزمایش پروژه به صورت محلی در مرورگر، ارائه می‌شود:

cd hello-world
npm run start

برای سایر دستورات می‌توانید به فایل package.json تولید شده مراجعه کنید.

باز کردن

اگر فقط در حال بررسی ایده‌ها هستید و نمی‌خواهید یک برنامه کامل را بوت‌استرپ کنید، می‌توانید Blockly را از unpkg با استفاده از تگ‌های اسکریپت بارگذاری کنید.

اگر موارد زیر را به هر صفحه HTML اضافه کنید، می‌توانید HTML را مستقیماً در مرورگر باز کنید تا با 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 نیست، زیرا با bundlerهایی مانند webpack کار نمی‌کند، اما برای نمونه‌سازی اولیه و آزمایش خوب است.

کد را دریافت کنید

روش‌های مختلفی وجود دارد که می‌توانید کد را برای اجرای Blockly آماده کنید.

تیم Blockly توصیه می‌کند که Blockly را از طریق یک مدیر بسته (مانند NPM یا Yarn ) اجرا کنید، زیرا:

ان پی ام 

npm install blockly --save

نخ 

yarn add blockly

گیت‌هاب

همچنین می‌توانید کد فشرده‌شده را از نسخه‌های گیت‌هاب ما دانلود کنید. با این حال، این کار مستلزم آن است که شما کد را به صورت دستی در فواصل منظم دانلود کنید تا آخرین به‌روزرسانی‌ها و اصلاحات 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>

هنگام استفاده از تگ‌های اسکریپت، می‌توانید به importها از فضای نام سراسری دسترسی داشته باشید:

// Access Blockly.
Blockly.thing;

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

// Access the generator.
javascript.javascriptGenerator;

واردات

// 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);