קבל את הקוד

יש כמה דרכים לקבל את קוד Blockly, וכמה דרכים לטעון אותו אחרי שמקבלים אותו.

סקריפט ליצירת חבילה

‫Blockly מספק סקריפט שמאתחל אפליקציית התחלה, שאפשר לשנות אותה. הוא משתמש בכלי פיתוח נפוצים לאינטרנט כמו webpack ו-eslint, אבל הוא לא כולל מסגרת כמו React או Angular.

לפני שמריצים את הפקודות הבאות, צריך להתקין את node.js ואת npm.

כדי ליצור אפליקציה שנכתבה ב-JavaScript בספרייה חדשה 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 באמצעות תגי script.

אם מוסיפים את הקוד הבא לכל דף 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
• הוא מעודד שימוש בתוספים במקום ב-monkeypatching של Blockly

NPM

npm install blockly --save

כדור צמר

yarn add blockly

GitHub

אפשר גם להוריד את הקוד הדחוס מהגרסאות שלנו ב-GitHub. עם זאת, כדי לקבל את העדכונים והתיקונים האחרונים של Blockly, צריך להוריד את הקוד באופן ידני במרווחי זמן קבועים.

אזהרה: ההורדות מ-GitHub מסופקות רק לנוחות המפתחים שהשתמשו בעבר ב-fork של Blockly. אם אתם מפתחים חדשים, מומלץ להשתמש במנהל חבילות.

טעינת הקוד

אחרי שמקבלים את הקוד, יש כמה דרכים לגשת אליו מהקוד.

תגי Script

<!-- 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 ארוז כ-UMD ולא כ-ESM.

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