vue sfc parser

Vue SFC Parser

vue.js ตัวแยกวิเคราะห์ส่วนประกอบไฟล์เดียวสำหรับการวิเคราะห์แบบคงที่

การใช้งาน

Vue SFC Parser นั้นคล้ายกับ parseComponent ของ Vue-Template-Compiler แต่มีผู้ช่วยที่มีประโยชน์สำหรับการวิเคราะห์รหัส

 const { parseComponent } = require ( 'vue-sfc-parser' )

const code = `
<template>
  <p>Hi</p>
</template>

<script lang="ts">
export default {}
</script>
`

const res = parseComponent ( code )
console . log ( res . template . calcGlobalOffset ( 7 ) )
console . log ( res . script . calcGlobalOffset ( 5 ) ) 

การอ้างอิง

parseComponent(code: string): SFCDescriptor

สิ่งนี้เกือบจะเหมือนกับ parseComponent ของ vue-template-compiler SFCDescriptor ดูเหมือนจะดังต่อไปนี้:

 interface SFCDescriptor {
  template : SFCBlock | null
  script : SFCBlock | null
  styles : SFCBlock [ ]
  customBlocks : SFCBlock [ ]
}

SFCBlock นั้นคล้ายกับ vue-template-compiler One เช่นกัน แต่มีวิธีการช่วยเพิ่มเติม

ผู้ช่วยเพิ่มเติมของ sfcblock

• calcGlobalOffset(offset: number): number

• calcGlobalRange(range: [number, number]): [number, number]

  วิธีการเหล่านี้มีไว้สำหรับการคำนวณตำแหน่งทั่วโลกจากตำแหน่งบล็อก ตัวอย่างเช่น:

  < docs >Test Docs</ docs >
  < template >
    < p >Hi</ p >
  </ template >

  บน SFC ด้านบนหากคุณให้ 5 template.calcGlobalOffset ซึ่งระบุตำแหน่งจากการขอทานของบล็อกเทมเพลตมันจะกลับ 38 ซึ่งเป็นตำแหน่งจากการขอทานของไฟล์

createDiffWatcher(): SFCDiffWatcher

สร้างวัตถุ Watcher ซึ่งจะตรวจจับความแตกต่างของบล็อก SFC แต่ละตัว SFCDiffWatcher มีวิธีการดังต่อไปนี้:

• add(filename: string, content: string): SFCDescriptor
• remove(filename: string): void
• diff(filename: string, content: string): SFCDiff

คุณสามารถเพิ่ม / ลบไฟล์ SFC ไปยังผู้เฝ้าดูโดยใช้วิธี add / remove จากนั้นคุณจะได้รับ DIFT ของบล็อก SFC แต่ละตัวโดยใช้วิธี diff มันส่งคืนวัตถุที่มีวิธีการบางอย่างที่คุณสามารถลงทะเบียนการโทรกลับที่จะเรียกเมื่อบล็อกที่เกี่ยวข้องมีการเปลี่ยนแปลง

ตัวอย่าง:

 const { createDiffWatcher } = require ( 'vue-sfc-parser' )
const fs = require ( 'fs' )
const chokidar = require ( 'chokidar' )

const watcher = createDiffWatcher ( )

chokidar
  . watch ( '**/*.vue' )
  . on ( 'add' , filename => {
    watcher . add ( filename , fs . readFileSync ( filename , 'utf8' ) )
  } )
  . on ( 'unlink' , filename => {
    watcher . add ( filename )
  } )
  . on ( 'change' , filename => {
    watcher
      . diff ( filename , fs . readFileSync ( filename , 'utf8' ) )
      . template ( template => {
        console . log ( template . content )
      } )
      . script ( script => {
        console . log ( script . content )
      } )
      . styles ( styles => {
        styles . forEach ( s => {
          console . log ( s . content )
        } )
      } )
      . customBlocks ( 'block-name' , blocks => {
        blocks . forEach ( b => {
          console . log ( b . content )
        } )
      } )
  } ) 

ใบอนุญาต

มิกซ์