从 Node.js 到 Go：聊聊我在前端工程化里写 CLI 工具的体会

package main

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

const componentTemplate = `// Code generated by svg-to-react. DO NOT EDIT.
import React from 'react';

export const {{.ComponentName}}: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  {{.SVGContent}}
);
`

type TemplateData struct {
	ComponentName string
	SVGContent    string
}

// 简单的名字转换：user-icon.svg -> IconUserIcon
func toComponentName(filename string) string {
	base := strings.TrimSuffix(filepath.Base(filename), filepath.Ext(filename))
	parts := strings.Split(base, "-")
	var result string
	for _, p := range parts {
		if len(p) > 0 {
			result += strings.ToUpper(p[:1]) + p[1:]
		}
	}
	return "Icon" + result
}

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

	raw := string(content)
	// 替换 fill 属性为 currentColor，方便 CSS 控制
	reFill := regexp.MustCompile(`fill="[^"]+"`)
	cleaned := reFill.ReplaceAllString(raw, `fill="currentColor"`)

	// 注入 {...props} 属性
	cleaned = strings.Replace(cleaned, "<svg", "<svg {...props}", 1)

	compName := toComponentName(srcPath)
	outPath := filepath.Join(outDir, compName+".tsx")

	var buf bytes.Buffer
	if err := tmpl.Execute(&buf, TemplateData{
		ComponentName: compName,
		SVGContent:    cleaned,
	}); err != nil {
		return err
	}

	return os.WriteFile(outPath, buf.Bytes(), 0644)
}

func BatchConvert(inputDir, outputDir string) {
	tmpl, _ := template.New("icon").Parse(componentTemplate)
	_ = os.MkdirAll(outputDir, 0755)

	files, err := filepath.Glob(filepath.Join(inputDir, "*.svg"))
	if err != nil || len(files) == 0 {
		fmt.Println("未找到 SVG 文件")
		return
	}

	var wg sync.WaitGroup
	// 限制并发通道，避免文件句柄耗尽
	limit := make(chan struct{}, 10)

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

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

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

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

func main() {
	// 实际项目中可以用 cobra 做更规范的子命令管理
	src := "./assets/svgs"
	dist := "./src/components/icons"
	BatchConvert(src, dist)
}

# macOS ARM64 (M1/M2/M3)
GOOS=darwin GOARCH=arm64 go build -o bin/svg-tools-darwin-arm64 main.go

# macOS Intel
GOOS=darwin GOARCH=amd64 go build -o bin/svg-tools-darwin-amd64 main.go

# Linux x64 (常见于 CI/CD 环境)
GOOS=linux GOARCH=amd64 go build -o bin/svg-tools-linux-amd64 main.go

# Windows
GOOS=windows GOARCH=amd64 go build -o bin/svg-tools-windows-amd64.exe main.go

// index.js
const { execFileSync } = require('child_process');
const path = require('path');
const os = require('os');

const platform = os.platform();
const arch = os.arch();

// 根据当前系统选择对应的二进制文件
const binaryName = `svg-tools-${platform}-${arch}${platform === 'win32' ? '.exe' : ''}`;
const binaryPath = path.join(__dirname, 'bin', binaryName);

try {
  execFileSync(binaryPath, process.argv.slice(2), { stdio: 'inherit' });
} catch (e) {
  process.exit(e.status || 1);
}

pnpm add -D @internal/svg-tools
pnpm svg-tools