(一)「造轮子」我也写了个Vue3脚手架!(整体介绍)

最近项目需要,让我提供一个团队的脚手架项目,拥有类似 create-vue 的一些基本配置,还要引入团队自己的一些东西,自动的生成项目结构。

于是乎,我参考了 create-vue 的相关代码,给团队做了这么一个项目,刚刚完成,准备记录分享下整个过程

文章可能较长,尽量找些时间进行分享,尽量事无巨细,😊持续更新中......

整体简单介绍

依赖库

命令行相关库

库名 作用
commander 用户命令行输入和参数解析
inquirer 构建交互式命令行工具
ora 在命令行应用程序中提供漂亮的加载状态提示
chalk 修改终端输出的字符串样式

工具库

库名 作用
@types/ejsejs 给文件指定位置动态嵌入对应的字符
@types/lodash-eslodash-es lodash库
@types/fs-extrafs-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 代码格式化工具,支持多种语言

补充说明:

  1. rollup 插件 :这些插件通常一起使用,@rollup/plugin-node-resolve@rollup/plugin-commonjs 配合可以处理大多数 npm 包,而 @rollup/plugin-typescript 则是 TypeScript 项目的必备。
  2. husky + lint-staged:这两个工具通常一起使用,可以在提交代码前自动格式化代码(Prettier)和运行 ESLint 检查(该项目因为有模板代码所以就没有引入ESLint)。
  3. 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文件,部分不好进行转换的就直接覆盖对应的文件即可
相关推荐
daols8817 分钟前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖2 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue