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