（一）「造轮子」我也写了个Vue3脚手架！（整体介绍）

最近项目需要，让我提供一个团队的脚手架项目，拥有类似 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询问用户需要哪些配置信息，本次支持暂定如下：

ts 复制代码

[
  { 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文件，部分不好进行转换的就直接覆盖对应的文件即可