前端初始化项目时根据路由创建文件夹和文件，效率提升20s

你还在为每次启动一个项目都要手动创建文件夹和文件而烦恼吗

说明：众所周知，我们在新起一个项目的时候，都是要添加路由，和创建对应的文件夹，子文件夹，index.jsx文件的，如果菜单少倒还好，如果菜单比较多，每次的复制黏贴，复制黏贴，复制黏贴，消耗大量的时间，人力，物力，最最重要的事情是！！！影响我们开发人员的心情，让我觉得我就是个无脑工具人，这种简单，无脑，但又不能搞错的工作，真的是很令人生气，在极大的程度上消耗我们的耐心

所以，简单写个小工具来做这件事情吧

参考地址： 源文件地址 文档地址： GitHub文档地址 博客文档地址

项目生成脚本

这是一个用于生成 React 项目结构的脚本。脚本会根据给定的菜单配置生成文件夹和文件，每个文件夹包含一个基本的 React 组件。

效果图如下

配置文件如下

如何使用

1. 运行脚本

   执行以下命令：

   node index.js
   

   这将根据 MENU_CONFIG 数据生成项目结构。

菜单配置

// 在 generateFiles.js 中的 MENU_CONFIG 数据
const MENU_CONFIG = [
  // ... 你的菜单配置
];

文件结构

生成的文件结构如下：

- SystemConfig
  - SystemInfo
    - index.jsx
  - WhiteList
    - index.jsx
- DeviceManage
  - SystemCommand
    - index.jsx
  - TimeSetting
    - index.jsx
  - NetworkConfig
    - index.jsx
  - DoubleHotBackup
    - index.jsx
  - DeviceCertificate
    - index.jsx
- SystemMaintenance
  - KeyBackUpAndRestore
    - index.jsx
  - RestoreAndUpgrade
    - index.jsx
- AdminManage
  - AdminList
    - index.jsx
  - AdminStrategy
    - index.jsx
- SystemMonitor
  - OnlineUser
    - index.jsx
  - ScheduledTask
    - index.jsx
  - DeviceMonitor
    - index.jsx
  - MonitorThreshold
    - index.jsx
- About
  - LicenseInfo
    - index.jsx

注意事项

• 请确保在运行脚本之前备份任何重要数据，因为脚本会覆盖已存在的文件夹和文件。
• 你可以根据需要调整生成的组件代码和文件夹结构。
• 若要使用 ES6 模块语法，请确保正确配置 Babel，可以参考 Babel 文档进行配置。
• 目前只支持二级菜单配置项的生成，只有一级菜单暂不支持，有三级菜单也不支持，原因：暂时没需求，懒得搞，可自行更改就行

示例代码

以下是生成的每个组件的简单示例代码：

// SystemInfo/index.jsx
import React from 'react';
import { Button } from 'antd';

const SystemInfo = () => {
  return (
    <div>
      <h1> SystemInfo </h1>
      <Button type="primary">Primary Button</Button>
    </div>
  );
};

export default SystemInfo;

你可以在每个组件的 index.jsx 中添加具体的页面内容。

最后附上源码地址

const fs = require('fs');

// 测试数据
const MENU_CONFIG = [
  
  {
    name: '系统配置',
    route: '/',
    key: '/systemConfig',
    subMenu: [
      {
        name: '系统信息',
        route: '/systemInfo',
        key: '/systemInfo',
      },
      {
        name: '白名单管理',
        route: '/whiteList',
        key: '/whiteList',
      },
    ]
  },
  // 设备管理
  {
    name: '设备管理',
    route: '/',
    key: '/deviceManage',
    subMenu: [
      {
        name: '系统命令',
        route: '/systemCommand',
        key: '/systemCommand',
      },
      {
        name: '时间设置',
        route: '/timeSetting',
        key: '/timeSetting',
      },
      {
        name: '网络配置',
        route: '/networkConfig',
        key: '/networkConfig',
      },
      {
        name: '双机热备',
        route: '/doubleHotBackup',
        key: '/doubleHotBackup',
      },
      {
        name: '设备证书',
        route: '/deviceCertificate',
        key: '/deviceCertificate',
      },
    ]
  },
  // 系统维护
  {
    name: '系统维护',
    route: '/',
    key: '/systemMaintenance',
    subMenu: [
      {
        name: '备份&恢复',
        route: '/keyBackUpAndRestore',
        key: '/keyBackUpAndRestore',
      },
      {
        name: '还原&升级',
        route: '/restoreAndUpgrade',
        key: '/restoreAndUpgrade',
      },
    ]
  },
  // 管理员管理
  {
    name: '管理员管理',
    route: '/',
    key: '/adminManage',
    subMenu: [
      {
        name: '管理员列表',
        route: '/adminList',
        key: '/adminList',
      },
      {
        name: '管理员策略',
        route: '/adminStrategy',
        key: '/adminStrategy',
      },
    ]
  },
  // 系统监控
  {
    name: '系统监控',
    route: '/',
    key: '/systemMonitor',
    subMenu: [
      {
        name: '在线用户',
        route: '/onlineUser',
        key: '/onlineUser',
      },
      {
        name: '定时任务',
        route: '/scheduledTask',
        key: '/scheduledTask',
      },
      {
        name: '设备监控',
        route: '/deviceMonitor',
        key: '/deviceMonitor',
      },
      {
        name: '监控阈值',
        route: '/monitorThreshold',
        key: '/monitorThreshold',
      },
    ]
  },
  // 关于
  {
    name: '关于',
    route: '/',
    key: '/about',
    subMenu: [
      {
        name: '授权信息',
        route: '/licenseInfo',
        key: '/licenseInfo',
      },
    ]
  }
]

function generateComponentCode(name, key) {
  return `
import React from 'react';
import { Button } from 'antd';

const ${key.charAt(1).toUpperCase() + key.slice(2)} = () => {
  return (
    <div>
      <h1> ${name} </h1>
      {/* 这里可以写你的具体页面内容 */}
      <Button type="primary">Primary Button</Button>
    </div>
  );
};

export default ${key.charAt(1).toUpperCase() + key.slice(2)};
  `;
}


MENU_CONFIG.forEach(({ name, key, subMenu }) => {
  // 生成主文件夹
  fs.mkdirSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}`, { recursive: true });
  console.log(`创建文件夹: ./${key.charAt(1).toUpperCase() + key.slice(2)}`);

  // 生成子文件夹
  subMenu.forEach(({ name: subName, key: subKey }) => {
    fs.mkdirSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}`, { recursive: true });
    console.log(`创建子文件夹: ./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}`);

    // 生成文件
    const code = generateComponentCode(subName, subKey);
    fs.writeFileSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}/index.jsx`, code);
    console.log(`创建index.jsx文件: ./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}/index.jsx`);
  });
});