自建前端脚手架（2）---搭建阶段

前言

根据上一篇的调研，create-react-app脚手架有些复杂，create-vite简单直接，所以按照create-vite的模式快速开发了自己的命令行工具，目前项目实现地址：

初版需求总结

1. 一行命令快速生成项目模板
2. 项目模板采用vite构建，项目中使用的技术包括：
   • react+ts
   • h5端使用（px2rem）
   • 路由控制，包含权限校验、错误页面
   • 有mock接口调试
   • 有代码规范
   • 一键生成changelog，自动累加版本，推送远程，触发构建

初版技术、流程总结

整个项目分为两个部分，分别为脚手架项目和模板项目：

1. 脚手架项目：

   • 项目结构

     

   • 使用

   npx fe-quick-start-template@latest gen
   

   执行该代码后拉取fe-quick-start-template的包，弹出下图效果

   

   （1）当前目录为空目录时，只需选择package name，项目在当前文件夹下创建，否则需填写项目名，项目在填写的目录下生成；

   （2）选择模板，目前只支持1个模板，后续逐步新增，选择对应的模板后，会复制项目结构中templates目录下对应的模板项目到新建的文件夹下；

   （3）是否初始化git选项，填Y|y则在项目下执行git init；

   （4）创建完成，提示进入模板项目，进行业务开发；

2. 模板项目

   • 模板项目体验地址

   • 项目结构
     

   • 使用

     （1）启动开发环境

     yarn dev
     

     （2）项目打包

     yarn build
     

     （3）本地预览

     yarn preview
     

     （4）tag推送及changelog生成

     yarn genTag
     

待完善功能

1. 脚手架项目
   • npx create语义化命令
2. 模板项目
   • 页面展示优化
   • 流水线搭建示例
   • commit信息校验
   • 一键新建页面
   • 一键复制redux slice，添加demo