vue service bay

Vue Service Bay

ภาพรวม

พบกับ Vue Service Bay-การใช้งานไมโครยูทิลิตี้ของคุณสำหรับการปรับเปลี่ยนจำนวนมากในส่วนประกอบ vue.js กล่าวคำอำลากับการปรับโครงสร้างใหม่ที่น่าเบื่อและเร่งความเร็วไปป์ไลน์การพัฒนาของคุณด้วยเครื่องมือที่มีน้ำหนักเบา แต่ทรงพลังนี้

แรงจูงใจ

โดยทั่วไปแล้ว Refactoring จะเป็นไปตามหนึ่งในสองวิธี: เพิ่มขึ้นหรือขายส่ง วิธีการที่คุณเลือกขึ้นอยู่กับโครงการของคุณ ตัวอย่างเช่นหากคุณต้องการใช้ระบบการออกแบบใหม่ใน codebase ทั้งหมดของคุณทั้งหมดในครั้งเดียวเครื่องมือนี้มีค่า เครื่องจักรสามารถทำงานได้อย่างง่าย ๆ เร็วกว่าและแม่นยำกว่ามนุษย์ การทำงานใหม่ของคุณโดยอัตโนมัติด้วยห้องสมุดนี้จะช่วยปรับปรุงประสิทธิภาพและความแม่นยำอย่างมีนัยสำคัญ ที่เก็บนี้เป็นเครื่องมือสำหรับการใช้การปรับโครงสร้างใหม่ให้กับส่วนประกอบ vue.js

การโยกย้ายทำงานอย่างไร

ผังงานต่อไปนี้ทำให้การโต้ตอบระหว่างที่เก็บนี้ง่ายขึ้นและเวิร์กโฟลว์ของคุณ:

 ผังงาน LR
    Subgraph Vue Service Bay
    v1 [อ่านไฟล์ vue]-> v2 [แยกตามส่วน]
    v2 [แยกตามส่วน]-> v3 [แยกวิเคราะห์เป็น AST]
    V4 [AST to Vue File]
    จบ
    รหัสของผู้ใช้ Subgraph
    v3-> u1 [จัดการ AST]
    U1-> v4
    จบ

แม้ว่าคุณจะยังใหม่กับการจัดการ AST (ต้นไวยากรณ์นามธรรม) ที่เก็บนี้มีตัวอย่างมากมายเพื่อให้คุณเริ่มต้น

สนามเด็กเล่น

หากต้องการลองใช้เครื่องมือนี้โคลนที่เก็บ:

git clone [email protected]:flyle-io/vue-service-bay.git
cd vue-service-bay
npm install
cd packages/examples
node migration/index.js
# Check the migration results however you like!
git difftool

วิธีใช้

การติดตั้ง

ติดตั้ง Vue Service Bay เป็นการพึ่งพา dev:

npm i -D vue-service-bay

ธง -D ติดตั้งแพ็คเกจเป็นการพึ่งพาการพัฒนา

สร้างไฟล์ Runner การโยกย้าย

ก่อนอื่นคุณจะต้องสร้างสคริปต์นักวิ่งโยกย้าย สำหรับรายละเอียดเพิ่มเติมโปรดดูที่ index.js ในตัวอย่างของเรา

ใช้สคริปต์นักวิ่ง

ถัดไปคุณจะต้องใช้ตรรกะการย้ายถิ่นเฉพาะ ดูตัวอย่างของเราสำหรับรายละเอียดเพิ่มเติม:

• ตัวอย่าง regexp
• ตัวอย่าง AST
• ตัวอย่างเวทมนตร์

(MagicString เป็นวิธีที่สะดวกในการเปลี่ยนแปลง ASTS สำหรับข้อมูลเพิ่มเติมเยี่ยมชม https://github.com/rich-harris/magic-string)

เรียกใช้การโยกย้าย

ดำเนินการสคริปต์นักวิ่งการย้ายถิ่นของคุณ:

node index.js

คอลัมน์: วิธีการอ่าน AST อย่างมีประสิทธิภาพ

ASTs มีความซับซ้อนและแปลกประหลาดสำหรับผู้ชมครั้งแรก ในทางกลับกันหากคุณสามารถควบคุม ASTS ได้พวกเขาอาจเป็นอาวุธที่ยอดเยี่ยมสำหรับการสร้างใหม่และการเขียนโปรแกรมการประมวลผลภาษาอื่น ๆ ที่นี่เราจะอธิบายวิธีการเข้าใจ AST ในวิธีง่ายๆ

ขั้นแรกภาษาการเขียนโปรแกรมมักจะถือว่าเป็นแผนผังนามธรรมแบบนามธรรม (AST) เพื่อความเข้าใจง่าย AST เป็นโครงสร้างข้อมูลที่ใช้กันอย่างแพร่หลายโดยคอมไพเลอร์เพื่อแสดงโครงสร้างของรหัสโปรแกรม

ห้องสมุดนี้ยังใช้ ASTS สำหรับ refactoring พูดง่ายๆคือโปรแกรมจะกลายเป็น AST จากนั้น AST จะถูกจัดการและเขียนกลับเข้าสู่โปรแกรมอีกครั้ง

โชคดีที่มีเครื่องมือที่จะเข้าใจ AST ได้อย่างง่ายดาย นั่นคือ AST Explorer

การใช้ AST Explorer เราสามารถข้ามไปยัง AST ที่สอดคล้องกันโดยอัตโนมัติโดยคลิกที่ใดก็ได้ สิ่งนี้ทำให้ง่ายต่อการค้นหาข้อมูลเกี่ยวกับโหนดที่เราต้องการประมวลผลและโหนดโดยรอบรวมถึงผู้ปกครอง

สุดท้ายเราจะอธิบายวิธีการดู ASTS สำหรับแต่ละภาษา

HTML

เราใช้ htmlparser2 สำหรับตัวแยกวิเคราะห์ HTML ของเรา ในช่วงเวลาของการใช้งานดั้งเดิมของห้องสมุดนี้ htmlparser2 เป็นตัวแยกวิเคราะห์หลักเพียงตัวเดียวที่สามารถเขียน ASTS กลับไปที่ HTML ได้อย่างถูกต้อง

หากต้องการดู ASTS ที่แยกวิเคราะห์โดย htmlparser2 ให้เลือกภาษา HTML และ htmlparser2 ใน AST Explorer

JavaScript / typescript

เราใช้ recast สำหรับตัวแยกวิเคราะห์ JavaScript / typeScript ในช่วงเวลาของการใช้งานดั้งเดิมของห้องสมุดนี้ acorn เป็นตัวแยกวิเคราะห์ที่สำคัญเพียงอย่างเดียวที่สามารถเขียน ASTS กลับไปที่ HTML ได้อย่างถูกต้อง ก่อนอื่นเราลอง Acorn แต่ไม่สามารถนำมาใช้เพราะ Acorn ละเว้นความคิดเห็น นอกจากนี้เรายังต้องการสนับสนุน TypeScript ดังนั้นในที่สุดเราก็เลือก recast นอกจากนี้เรายังแยกวิเคราะห์ JavaScript เป็น typeScript นี่เป็นเพราะ TypeScript เป็น superset ของ JavaScript

หากต้องการดู ASTS ที่แยกวิเคราะห์โดย recast ให้เลือกภาษา JavaScript และ recast ใน AST Explorer และกดปุ่ม config และเลือก typescript เป็น parser

CSS / SCSS

เราใช้ postcss สำหรับตัวแยกวิเคราะห์ CSS / SCSS ของเรา

หากต้องการดู ASTS ที่แยกวิเคราะห์โดย PostCSS ให้เลือก CSS และ postcss ใน AST Explorer

ภาษาที่รองรับ

Vue Service Bay สามารถใช้กับภาษาใด ๆ สำหรับการอพยพที่ไม่ต้องการการจัดการ AST อย่างไรก็ตามหากคุณใช้ AST จะได้รับการสนับสนุนภาษาต่อไปนี้ หากคุณต้องการเพิ่มการสนับสนุนสำหรับภาษาอื่น ๆ อย่าลังเลที่จะส่ง PR

<template>

• HTML
• JSX
• ตัก

<Script>

• จาวาสคริปต์
• ตัวพิมพ์ใหญ่
• CoffeeScript

<Style>

• CSS
• SCSS
• เขี้ยว
• น้อย
• สไตลัส
• postcss

วิธีการมีส่วนร่วม

เรายินดีต้อนรับการมีส่วนร่วมของคุณ

เราเปิดรับปัญหาและดึงคำขอเสมอ การมีส่วนร่วมของคุณช่วยให้ VueServiceBay เป็นเครื่องมือที่ดีกว่าสำหรับทุกคน

โปรดทราบ

ในขณะที่เรายินดีต้อนรับปัญหาและดึงคำขอเวลาบำรุงรักษาที่ใช้งานอยู่มี จำกัด หากคุณมีคำขอคุณสมบัติหรือต้องการการเปลี่ยนแปลงที่สำคัญการส่งคำขอดึงจะแนะนำอย่างยิ่ง

การรายงานข้อบกพร่อง

• ตรวจสอบว่ามีการรายงานข้อผิดพลาดในประเด็นหรือไม่
• ถ้าไม่สร้างปัญหาใหม่ด้วยชื่อเชิงพรรณนาและให้ข้อมูลมากที่สุด

แนะนำการปรับปรุง

• สำหรับคำขอคุณสมบัติควรส่งคำขอดึงด้วยการเปลี่ยนแปลงที่คุณเสนอ ทรัพยากรการบำรุงรักษาที่ จำกัด อาจป้องกันไม่ให้เราใช้คุณสมบัติใหม่ตามปัญหาเท่านั้น