ดาวน์โหลด 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);