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