ดาวน์โหลด Blockly

การรับโค้ด 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 ในการจัดการทรัพยากร Dependency แล้ว ทำให้การอัปเดตล่าสุดของ 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 เนื่องจากไม่สามารถทำงานร่วมกับ Bundler อย่าง Webpack แต่เหมาะสำหรับการสร้างต้นแบบและการทดลอง

รับโค้ด

มีหลายวิธีที่คุณสามารถได้โค้ดเพื่อเรียกใช้งาน Blockly

ทีม Blockly แนะนำให้กำหนด Blockly ผ่านตัวจัดการแพ็กเกจ (เช่น NPM หรือ Yarn) เนื่องจากสาเหตุต่อไปนี้

  • ติดตามข้อมูลการเปลี่ยนแปลงต่างๆ ใน Blockly ได้ง่ายกว่า
  • สนับสนุนการใช้ปลั๊กอินแทน monkeypatching 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);