ant design pro 模版简化工具

2023年8月，我满怀期待的开创了自己的小公司，北京微谏科技有限公司，当时的业务仅有一份前领导介绍的 AI 前端外包。转眼间 2 年就过去了，虽然服务了一些客户，也做了一些有趣的项目，但毕竟不是自己的产品，无法决定产品迭代，也无法持续创造营收。所以我下定决心，一定要做完全属于自己的东西。

之前做外包项目，在开发后台管理系统的时候，采用 ant-design-pro 搭建的项目，生成好后，需要手动调整很多代码，才能让界面回归到一个简单可用的状态。所以我开发的第一款产品就是 ant design pro 模版简化工具，他能让你的后台管理项目快速启动。原本需要半天的时间，用上这款工具后，只需要1分钟。让你专注于业务的开发。

可能对于中，大型公司，这款工具并没有什么作用，但是对于小型的非科技型企业、计算机专业的学生、偶尔接接私活儿的程序员们，不太擅长前端的后端工程师，我觉得还是挺有帮助的。

以下是使用全局安装的 pro 命令初始化的 simple 脚手架，不得不说还是挺漂亮的，但是外包开发主打的就是一个快，漂亮只是加分项。

这里面有一些用不上的部分，包括但不限于 mock 数据，单元测试，Ant 相关Logo/提示信息，多语言，欢迎页，管理页。所以我们需要先把他删除掉。然后增添的一个基础的，可以增删改查的模块就ok了，大体思路参考下方代码。

ini 复制代码

import { execSync } from 'child_process';
import fs from 'fs';
import path, { dirname } from 'path';
import { fileURLToPath } from 'url';

// 获取脚本路径
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// 执行脚本路径
const mockPath = path.join(__dirname, '../mock');
const testsPath = path.join(__dirname, '../tests');
const jestPath = path.join(__dirname, '../jest.config.ts');
const srcUserLoginTest = path.join(__dirname, '../src/pages/User/Login/login.test.tsx');
const srcUserLoginSnapshots = path.join(__dirname, '../src/pages/User/Login/__snapshots__');
const typesPath = path.join(__dirname, '../types');
const srcComponentsFooter = path.join(__dirname, '../src/components/Footer');
const srcComponentsRightContent = path.join(__dirname, '../src/components/RightContent/index.tsx');
const srcLocales = path.join(__dirname, '../src/locales');
const srcPagesAdmin = path.join(__dirname, '../src/pages/Admin.tsx');
const srcPagesWelCome = path.join(__dirname, '../src/pages/Welcome.tsx');
const srcPagesTableList = path.join(__dirname, '../src/pages/TableList');
const srcPages404 = path.join(__dirname, '../src/pages/404.tsx');
const srcServices = path.join(__dirname, '../src/services');
const srcConfigOneApi = path.join(__dirname, '../config/oneapi.json');
const srcAccess = path.join(__dirname, '../src/access.ts');
const publicIcons = path.join(__dirname, '../public/icons');
const publicCNAME = path.join(__dirname, '../public/CNAME');
const publicIco = path.join(__dirname, '../public/favicon.ico');
const publicSvg = path.join(__dirname, '../public/logo.svg');
const publicProIcon = path.join(__dirname, '../public/pro_icon.svg');

// 删除不需要的代码
[
  mockPath,
  testsPath,
  jestPath,
  srcUserLoginTest,
  srcUserLoginSnapshots,
  typesPath,
  srcComponentsFooter,
  srcComponentsRightContent,
  srcLocales,
  srcPagesAdmin,
  srcPagesWelCome,
  srcPagesTableList,
  srcPages404,
  srcServices,
  srcConfigOneApi,
  srcAccess,
  publicIcons,
  publicCNAME,
  publicIco,
  publicSvg,
  publicProIcon,
].forEach((itemPath) => {
  execSync(`rm -rf ${itemPath}`);
});

// 将 replace-source-code 的内容覆盖到 ../ 中
execSync(`cp -r ${path.join(__dirname, './replace-source-code/*')} ${path.join(__dirname, '../')}`);

const args = process.argv.slice(2);

const title = args.length > 0 ? args[0] : '后台管理系统';

// 替换系统标题
execSync(
  `sed -i '' 's/{{title}}/${title}/g' ${path.join(__dirname, '../config/defaultSettings.ts')}`,
);

执行后我们就可以得到一个清爽的后台界面了。

接下来，就可以的专心的进行业务上的开发了。

如果你想体验这款工具，可以访问我的公司官网，目前在线生成开放了100次的免登录生成代码。如果您看到了"今日免登录体验次数已耗尽，请登录后使用"的提示，也请给予我一点信任，免费注册一下我的网站，这样你就可以享受无限次的后台模版生成服务了。

希望可以通过这篇文章与有需求的小伙伴们交个朋友，创业路途遥远，唯有日拱一卒。如果大家对我的工具有什么好的建议，也可以在评论区里提出，感谢大家，祝前程似锦，大展宏图。