最近项目需要，让我提供一个团队的脚手架项目，拥有类似 create-vue 的一些基本配置，还要引入团队自己的一些东西，自动的生成项目结构。
于是乎，我参考了 create-vue 的相关代码，给团队做了这么一个项目，刚刚完成，准备记录分享下整个过程
文章可能较长，尽量找些时间进行分享，尽量事无巨细，😊持续更新中......
整体简单介绍
依赖库
命令行相关库
| 库名 | 作用 |
|---|---|
commander | 用户命令行输入和参数解析 |
inquirer | 构建交互式命令行工具 |
ora | 在命令行应用程序中提供漂亮的加载状态提示 |
chalk | 修改终端输出的字符串样式 |
工具库
| 库名 | 作用 |
|---|---|
@types/ejs、ejs | 给文件指定位置动态嵌入对应的字符 |
@types/lodash-es、lodash-es | lodash库 |
@types/fs-extra、fs-extra | 替代Node.js内置fs模块，更安全、更强大的文件操作库 |
开发和打包
| 库名 | 作用 |
|---|---|
esno | 基于 esbuild 的 TS/ESNext node 运行时，用来开发时候直接运行ts代码 |
gulp | 基于流的自动化构建工具，用于执行重复任务 |
rollup | rollup打包 |
@rollup/plugin-commonjs | 将 CommonJS 模块转换为 ES6 模块，以便 Rollup 处理 |
@rollup/plugin-json | 允许 Rollup 导入 JSON 文件 |
@rollup/plugin-node-resolve | 帮助 Rollup 定位 node_modules 中的第三方模块 |
@rollup/plugin-typescript | 为 Rollup 提供 TypeScript 支持 |
其他
| 库名 | 作用 |
|---|---|
@types/node | Node.js 的类型定义文件 |
husky | Git 钩子工具，可以在提交或推送时运行脚本 |
lint-staged | 对 Git 暂存区的文件运行 linters |
prettier | 代码格式化工具，支持多种语言 |
补充说明：
- rollup 插件：这些插件通常一起使用，
@rollup/plugin-node-resolve和@rollup/plugin-commonjs配合可以处理大多数 npm 包，而@rollup/plugin-typescript则是 TypeScript 项目的必备。 - husky + lint-staged：这两个工具通常一起使用，可以在提交代码前自动格式化代码（Prettier）和运行 ESLint 检查（该项目因为有模板代码所以就没有引入ESLint）。
- fs-extra：相比原生
fs模块，它提供了更多实用方法（如copy,remove,ensureDir等），并且所有方法都返回 Promise。
代码基本流程
1、主程序使用commander处理命令行参数，提供create命令来创建新项目，通过inquirer询问用户需要哪些配置信息，本次支持暂定如下：
[
{ value: 'typescript', name: 'TypeScript', },
{ value: 'jsx', name: 'JSX 支持', },
{ value: 'router', name: 'Router（单页面应用开发）', },
{ value: 'pinia', name: 'Pinia（状态管理）', },
{ value: 'vitest', name: 'Vitest（单元测试）', },
{ value: 'eslint', name: 'ESLint（错误预防）', },
{ value: 'prettier', name: 'Prettier（代码格式化）', },
]
2、根据配置处理文件，我们定义好相关模板进行文件处理，文件的处理有几种情况：
- 特殊文件：模板文件中
.开头的文件用_开头，因为.开头的文件在项目中通常可能会影响目录，所以这里指定一个这样的命名规范。还有就是操作文件的时候.开头的文件可能会有影响 - json文件：json文件读取内容，合并了json再进行写入文件，相关依赖需要进行排序
- 配置文件：一些配置文件，可能需要根据配置动态增加内容，采用ejs对文件进行字符串的注入来生成最后的文件
- 转换成ts文件：ts是js的超集，所以大部分的js文件直接更改后缀，就可以变为ts文件，部分不好进行转换的就直接覆盖对应的文件即可
