להורדה שלBlockly

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

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

Blockly מספק סקריפט לאתחול אפליקציה לתחילת פעולה, שאותו ניתן ואז לשנות. הוא משתמש בכלים נפוצים לפיתוח אתרים, כמו webpack וגם eslint, אבל לא כולל framework, כמו 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 שנוצר כדי להשתמש בפקודות אחרות.

ביטול האריזה

אם אתם סתם מתנסים ברעיונות ולא רוצים להתחיל לפעול של האפליקציה, ניתן לטעון את 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) כי:

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