รับโค้ด

คุณรับโค้ด 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);