6.5 工具脚本场景：自动化脚本快速生成

场景痛点

日常开发中，我们经常需要创建大量结构相似的文件：新页面组件、API接口文件、测试用例等。手动复制粘贴不仅低效，还容易漏改文件名或忘记修改模板中的特定字段。

实战方案：组件生成脚本

以下是一个基于 Node.js 的实用脚本，用于快速生成 React 组件目录：

// scripts/generate-component.js
const fs = require('fs');
const path = require('path');

const [,, name] = process.argv;
if (!name) {
  console.log('用法: node generate-component.js UserCard');
  process.exit(1);
}

const targetDir = path.join(__dirname, '../src/components', name);
if (fs.existsSync(targetDir)) {
  console.log('组件已存在');
  process.exit(1);
}

// 创建目录
fs.mkdirSync(targetDir, { recursive: true });

// 模板内容
const files = {
  'index.tsx': `import React from 'react';
import styles from './index.module.scss';

interface ${name}Props {
  // TODO: 定义props
}

export const ${name}: React.FC<${name}Props> = (props) => {
  return (
    <div className={styles.container}>
      ${name} Component
    </div>
  );
};`,

  'index.module.scss': `.container {
  // TODO: 添加样式
}`,

  'index.test.tsx': `import { render } from '@testing-library/react';
import { ${name} } from './index';

describe('${name}', () => {
  it('should render correctly', () => {
    const { container } = render(<${name} />);
    expect(container).toBeTruthy();
  });
});`
};

// 写入文件
Object.entries(files).forEach(([file, content]) => {
  fs.writeFileSync(path.join(targetDir, file), content);
});

console.log(`✅ 已创建组件: src/components/${name}/`);

使用方法

在 package.json 中添加：

{
  "scripts": {
    "new:comp": "node scripts/generate-component.js"
  }
}

命令行执行：

npm run new:comp UserProfile

进阶工具推荐

对于复杂场景，可直接使用成熟工具：

• Plop：通过问答式交互生成文件，适合需要自定义变量（如作者、日期）的场景
• Hygen：将生成逻辑模板化，团队共享更规范
• Schematics（Angular/Nx 生态）：适合大型项目的基础设施代码生成

收益

• 时间节省：从手动 5 分钟/次缩短到 3 秒/次
• 规范统一：确保每个组件都包含必要的文件（样式、测试、类型定义）
• 减少错误：避免复制旧代码时忘记修改类名或路径

提示：脚本不需要一开始就完美，先解决当前最频繁的 3 个重复操作，逐步迭代即可。