การแก้ไขข้อบกพร่องด้วย Blockly และ Blockly-Sample

บางครั้งเมื่อพัฒนาปลั๊กอินในตัวอย่างแบบบล็อก คุณจะต้องทำการเปลี่ยนแปลงที่สอดคล้องกันใน Blockly เอง ปลั๊กอินส่วนใหญ่ตั้งค่าให้ดึงข้อมูลแบบบล็อก (Blockly จากรีจิสทรี npm) ดังนั้นคุณจึงใช้ได้เฉพาะโค้ดที่มีการเผยแพร่เมื่อ npm เท่านั้น ซึ่งจะทำให้การแก้ไขข้อบกพร่องของ Blockly เป็นเรื่องยาก เมื่อคุณต้องการทําและทดสอบการเปลี่ยนแปลงทั้งในตัวอย่างแบบบล็อกและแบบบล็อก คุณสามารถใช้วิธีการใดก็ได้ด้านล่างเพื่อใช้การเปลี่ยนแปลงที่ยังไม่ได้เผยแพร่ร่วมกัน

คุณกำหนดให้ npm ใช้แพ็กเกจจากเครื่องแทนการดึงข้อมูลแพ็กเกจจากรีจิสทรี npm ได้ เมื่อใช้วิธีนี้ คุณควรจะมีสิทธิ์เข้าถึงsourcemaps ที่ทำให้การแก้ไขข้อบกพร่อง blockly_registered ได้ง่ายขึ้น คุณจะใช้เมธอดนี้กับการเปลี่ยนแปลงในแกนประมวลผลที่ยังไม่ได้พุชไปยัง GitHub ได้

  1. แยกส่วน:

    $ npm run package
$ cd dist
$ npm link

    ขั้นตอนเหล่านี้จะสร้าง Core Blockly สร้างแพ็กเกจ แล้วสร้างลิงก์สัญลักษณ์ไปยังไฟล์แพ็กเกจ

  2. ในแยกตัวอย่างบล็อก:

    $ npm link blockly

    ขั้นตอนนี้จะกำหนดให้ npm ค้นหาลิงก์สัญลักษณ์ที่คุณสร้างขึ้นก่อนหน้านี้แทนที่จะดึงข้อมูลแพ็กเกจจาก npm

  3. npm run startเพื่อทดสอบปลั๊กอินของคุณ

เมื่อทำการเปลี่ยนแปลงในส่วนหลัก คุณจะต้องสร้างและจัดแพ็กเกจใหม่

วิธีที่ 2: ดึงข้อมูลจาก GitHub

คุณกำหนดให้ npm ดึงข้อมูลแพ็กเกจจาก GitHub แทนการดึงข้อมูลจากรีจิสทรี npm ได้ เมื่อใช้วิธีนี้ คุณควรจะมีสิทธิ์เข้าถึง sourcemaps ที่ทำให้การแก้ไขข้อบกพร่อง blockly_registered ทำได้ง่ายขึ้น คุณจะต้องใช้เวอร์ชันบล็อก ที่เผยแพร่ใน GitHub แล้ว

  1. ตรวจสอบว่าส่วน scripts ใน package.json สำหรับปลั๊กอินของคุณมีข้อมูลต่อไปนี้

    "postinstall": "blockly-scripts postinstall"

    สคริปต์นี้จะสร้าง Blockly โดยอัตโนมัติหลังจากติดตั้งจาก GitHub ในขั้นตอนถัดไป

  2. แทนที่จะระบุหมายเลขเวอร์ชันสำหรับบล็อกใน package.json ให้ระบุที่อยู่ Git และชื่อสาขาดังนี้

    "blockly": "git://github.com/google/blockly.git#develop"

    ซึ่งอาจเป็นลิงก์ไปยังทางแยกของคุณเองได้หากมีการเปลี่ยนแปลงที่ไม่ได้ผสานรวม

  3. เหมือนปกติ npm install

  4. npm run startเพื่อทดสอบปลั๊กอินของคุณ

เมื่อทำการเปลี่ยนแปลงใน Core Blockly คุณจะต้องพุชการเปลี่ยนแปลงเหล่านั้นไปยัง GitHub ตาม Branch ที่ระบุไว้ นอกจากนี้ เมื่อต้องการให้ npm ดึงข้อมูลเวอร์ชันใหม่จาก GitHub คุณจะต้อง npm uninstall blockly (หรือนำออกจาก node_modules) แล้วติดตั้งใหม่อีกครั้งตามที่อธิบายไว้ข้างต้น

วิธีที่ 3: Advanced Playground

คุณสามารถใช้ Play Console ขั้นสูง (ในแกนหลัก Blockly) เพื่อแก้ไขข้อบกพร่องของปลั๊กอินได้ เมื่อใช้วิธีนี้ คุณจะใช้ blockly_uncompressed ซึ่งอาจแก้ไขข้อบกพร่องได้ง่ายขึ้น เนื่องจากไม่ต้องใช้การแมปแหล่งที่มา ใช้วิธีนี้หากคุณมีปัญหาในการแก้ไขข้อบกพร่องด้วย Sourcemaps หรือต้องการทดสอบปลั๊กอินโดยใช้ฟีเจอร์ของ Playground ขั้นสูง

  1. ในไดเรกทอรีปลั๊กอินในบล็อกตัวอย่าง:

    $ npm run build
$ cd dist
$ pwd

    วิธีนี้จะสร้างและจัดแพ็กเกจปลั๊กอินของคุณ จากนั้นจะพิมพ์เส้นทางไดเรกทอรีแบบเต็ม ของไดเรกทอรีแยกสำหรับปลั๊กอินของคุณ คัดลอกเส้นทางนี้ เราจะต้องใช้ในขั้นตอนถัดไป

  2. ใน Blockly ใน advanced_playground.html:

    <script src="$PATH_TO_DIST_DIR/index.js">

    จากนั้นคุณต้องตั้งค่าต่างๆ ที่จำเป็นสำหรับปลั๊กอินด้วย เช่น คุณอาจต้องระบุค่าบางอย่างในออบเจ็กต์ตัวเลือก ตั้งค่านี้ในการตั้งค่าพื้นที่ทำงานที่มีอยู่

  3. เปิดสนามเด็กเล่นขั้นสูงในเบราว์เซอร์เพื่อทดสอบปลั๊กอินของคุณ

เมื่อทำการเปลี่ยนแปลงเป็นช่วงๆ ไป คุณเพียงแค่รีเฟรชเท่านั้น เมื่อทำการเปลี่ยนแปลงกับปลั๊กอิน คุณจะต้องเรียกใช้ npm run build อีกครั้ง