چندین راه برای دریافت کد 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 تولید شده مراجعه کنید.
Unpkg
اگر فقط با ایده ها بازی می کنید و نمی خواهید یک برنامه کامل را بوت استرپ کنید، می توانید 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 نیست، زیرا با باندلرهایی مانند webpack کار نمی کند، اما برای نمونه سازی و آزمایش خوب است.
کد را دریافت کنید
راه های مختلفی وجود دارد که می توانید کد اجرای Blockly را دریافت کنید.
تیم Blockly توصیه می کند که Blockly را از طریق یک مدیر بسته (مانند NPM یا Yarn ) درخواست کنید زیرا:
- به روز ماندن با تغییرات در Blockly آسان تر است
- استفاده از پلاگین ها را به جای میمون وصله کردن Blockly تشویق می کند
NPM
npm install blockly --save
نخ
yarn add blockly
GitHub
همچنین می‌توانید کد فشرده‌شده را از نسخه‌های 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;
واردات
// 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);