יש כמה דרכים לקבל את הקוד ב-Blockly, וכמה דרכים לטעון ��ותו אחרי שמקבלים אותו.
סקריפט Create-package
ב-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 באמצעות תגי סקריפט.
אם מוסיפים את הקוד הבא לדף 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);