聊聊前端工程化：我们团队自研 CLI 与构建工具的落地踩坑记录

package main

import (
	"bytes"
	"fmt"
	"os"
	"path/filepath"
	"regexp"
	"strings"
	"sync"
	"text/template"
)

// 组件模板，支持自定义颜色与尺寸
const vueTemplate = `<template>
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    :width="size" 
    :height="size" 
    viewBox="{{.ViewBox}}" 
    :fill="color"
    v-bind="$attrs"
  >
    {{.InnerSVG}}
  </svg>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  size?: number | string
  color?: string
}>(), {
  size: '1em',
  color: 'currentColor',
})
</script>
`

type IconData struct {
	Name     string
	ViewBox  string
	InnerSVG string
}

var (
	viewBoxRegex = regexp.MustCompile(`viewBox="([^"]+)"`)
	innerRegex   = regexp.MustCompile(`<svg[^>]*>([\s\S]*?)<\/svg>`)
	fillRegex    = regexp.MustCompile(`fill="[^"]+"`)
)

func processSVG(filePath string, tmpl *template.Template, outDir string) error {
	content, err := os.ReadFile(filePath)
	if err != nil {
		return err
	}

	// 1. 提取 viewBox，拿不到就保底给一个默认值
	viewBox := "0 0 1024 1024"
	if matches := viewBoxRegex.FindSubmatch(content); len(matches) > 1 {
		viewBox = string(matches[1])
	}

	// 2. 提取 SVG 内部标签并清理硬编码颜色
	innerSVG := ""
	if matches := innerRegex.FindSubmatch(content); len(matches) > 1 {
		cleanContent := fillRegex.ReplaceAll(matches[1], []byte(""))
		innerSVG = strings.TrimSpace(string(cleanContent))
	}

	// 3. 计算组件文件名 (如 icon-user.vue)
	baseName := strings.TrimSuffix(filepath.Base(filePath), filepath.Ext(filePath))
	componentName := "Icon" + strings.Title(baseName)

	var buf bytes.Buffer
	data := IconData{
		Name:     componentName,
		ViewBox:  viewBox,
		InnerSVG: innerSVG,
	}

	if err := tmpl.Execute(&buf, data); err != nil {
		return err
	}

	// 4. 写出目标文件
	outPath := filepath.Join(outDir, componentName+".vue")
	return os.WriteFile(outPath, buf.Bytes(), 0644)
}

func main() {
	inputDir := "./svgs"
	outputDir := "./components"
	_ = os.MkdirAll(outputDir, 0755)

	tmpl := template.Must(template.New("icon").Parse(vueTemplate))
	files, _ := filepath.Glob(filepath.Join(inputDir, "*.svg"))

	var wg sync.WaitGroup
	// 限制并发数量，避免文件句柄被撑爆
	sem := make(chan struct{}, 16) 

	for _, file := range files {
		wg.Add(1)
		sem <- struct{}{}

		go func(f string) {
			defer wg.Done()
			defer func() { <-sem }()

			if err := processSVG(f, tmpl, outputDir); err != nil {
				fmt.Printf("处理文件失败: %s, err: %v\n", f, err)
			}
		}(file)
	}

	wg.Wait()
	fmt.Printf("处理完成，共生成 %d 个图标组件\n", len(files))
}

{
  "scripts": {
    "generate:icons": "icon-compiler --input ./raw-icons --output ./src/icons"
  }
}