รับโค้ด

คุณรับโค้ด 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 เพื่อจัดการการอ้างอิง ซึ่งช่วยให้คุณอัปเดต 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

คำเตือน: การดาวน์โหลดจาก GitHub มีไว้เพื่ออำนวยความสะดวกแก่นักพัฒนาแอปที่ เคยแยก Fork 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;

หมายเหตุ: เมื่อใช้แท็กสคริปต์ คุณจะมีไฟล์ข้อความหลายไฟล์ไม่ได้เนื่องจากระบบจะใช้ข้อความกับอาร์เรย์ Blockly.Msg โดยตรง

การนำเข้า

หมายเหตุ: การใช้การนำเข้าเป้าหมายแพ็กเกจของเรากำหนดให้คุณต้องใช้ Bundler (เช่น webpack) เนื่องจาก Blockly บรรจุเป็น UMD ไม่ใช่ ESM

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