@asiimov/sfc-generator: 强大的 Vue 单文件组件生成工具

前言

在 Vue 开发中,我们经常需要处理单文件组件(SFC)的生成、解析和转换。今天为大家介绍一个强大的工具包 - @asiimov/sfc-generator,它提供了一系列实用的工具函数,可以帮助我们更好地处理 Vue SFC。

功能特点

该工具包主要提供以下核心功能:

1. 完整的 SFC 生成能力

   • 支持生成 template、script、style 三大块
   • 支持 TypeScript
   • 支持 <script setup>
   • 支持 scoped style

2. 强大的 AST 操作能力

   • 提供节点类型判断工具
   • 支持 AST 遍历
   • 支持节点查找、替换、删除等操作

3. 灵活的配置选项

   • 支持自定义缩进
   • 支持属性换行配置
   • 支持自动格式化

安装使用

npm install @asiimov/sfc-generator

核心 API 详解

1. 生成完整的 SFC

import { generateComponent } from '@asiimov/sfc-generator'

const code = generateComponent({
  // 模板部分
  template: {
    node: templateASTNode,
    options: {
      breakOnAttrs: 2,    // 当属性数量超过2个时换行
      indentSize: 2,      // 缩进空格数
      autoIndent: true    // 启用自动缩进
    }
  },
  // 脚本部分
  script: {
    node: scriptASTNode,
    attrs: {
      setup: true,        // 使用 <script setup>
      lang: 'ts'         // 使用 TypeScript
    }
  },
  // 样式部分
  styles: [{
    content: '.foo { color: red; }',
    lang: 'scss',
    scoped: true
  }]
})

2. 节点类型判断

import { 
  isElementNode,
  isTextNode, 
  isInterpolationNode 
} from '@asiimov/sfc-generator'

// 判断元素节点
if (isElementNode(node)) {
  console.log(node.tag)         // 获取标签名
  console.log(node.children)    // 获取子节点
}

// 判断文本节点
if (isTextNode(node)) {
  console.log(node.text)        // 获取文本内容
}

// 判断插值表达式节点
if (isInterpolationNode(node)) {
  console.log(node.expression)  // 获取表达式内容
}

3. AST 遍历与操作

import { traverse } from '@asiimov/sfc-generator'

traverse(templateASTNode, (path) => {
  // 获取当前节点信息
  const node = path.node
  const parent = path.parent
  
  // 查找特定节点
  const buttonNode = path.find(node => 
    isElementNode(node) && node.tag === 'button'
  )
  
  // 节点操作
  path.replaceWith(newNode)    // 替换节点
  path.remove()                // 删除节点
  path.skip()                  // 跳过子节点遍历
  
  // 获取兄弟节点
  const nextSibling = path.getSibling(1)
})

实战示例

示例1: 生成一个简单的组件

const template = {
  type: TemplateNodeType.Element,
  tag: 'div',
  attrsMap: { class: 'container' },
  children: [{
    type: TemplateNodeType.Text,
    text: 'Hello World'
  }]
}

const code = generateTemplate(template)
console.log(code)
// 输出:
// <template>
//   <div class="container">
//     Hello World
//   </div>
// </template>

示例2: 遍历并修改组件结构

traverse(templateASTNode, (path) => {
  // 找到所有的按钮元素
  if (isElementNode(path.node) && path.node.tag === 'button') {
    // 添加loading属性
    path.node.attrsMap = {
      ...path.node.attrsMap,
      loading: 'loading'
    }
  }
})

注意事项

1. 使用时需要提供有效的 AST 节点（使用 @vue/compiler-sfc 生成）
2. 脚本 AST 必须是 Babel AST 节点
3. 样式配置需要遵循 @vue/compiler-sfc 的 SFCBlock 接口规范

总结

@asiimov/sfc-generator 是一个功能强大的 Vue SFC 处理工具包,它可以帮助我们:

• 生成标准的 Vue 单文件组件
• 方便地操作和转换组件的 AST
• 提供灵活的配置选项

无论是在开发工具、代码生成器还是组件库中,它都是一个非常有用的工具。

相关链接

• NPM 包地址
• Gitee 仓库

希望这篇文章对你有帮助！如果觉得不错,欢迎点赞转发,也欢迎在评论区留言交流。