仓库
传送门 👉 dishait/tov-template: vite + vue3 + ts 开箱即用现代开发模板
回顾
tov-template 从 2022/1/8 日起开源至今 2023/1/10
已获得
- 181 + 431 Star
- 72 + 115 Fork
已处理
在这里由衷感谢每个 关注，使用 甚至 贡献 该项目的靓仔和靓女们 🥰
问题
虽然 tov-template 目前已经具备足够多的 特性 👇
- Vite 的
- Vue3 的
- 文件路由
- 布局系统
- Mock 支持
- Api 自动引入
- 组件自动引入
- 图标自动引入
- VueUse 支持
- TypeScript 的
- Windi CSS 的
- 暗黑模式支持
- SWR 请求支持
- pinia 状态管理
- pnpm 包管理器
- 跳转进度条支持
- Inspect 调试支持
- 插件自动加载支持
- Vitest 单元测试支持
- 支持 Markdown 渲染
- 路径别名 ~ 支持
- 命令行自动创建与删除
- i18n 国际化支持
- 漂亮的 404 页 支持
- tsx 支持
- gzip 资源压缩支持
- 环境变量配置支持
- 统一的代码规范与风格支持
- 生产环境自动移除开发日志
- defineOptions 支持
除此之外，预设 内部也做了很多优化，为我们带来了好的 DX (开发体验)
但是这些也为项目引入了一些新的问题 👇
- 越来越多的配置文件，让人眼花缭乱 😵
- 越来越多的
vite插件，让项目开发和编译卡顿 😢
而这一切的问题都来源于新的功能不断加入 😅
但大多数情况下，我们其实并不需要全部的功能才能满足业务需求 🤔
方案
基于上述问题，我们也许可以采用 按需的方式，只为项目加入自己需要的功能。
prepare
在 node 项目当中，我们拿到项目的第一步就是执行 npm install 执行项目依赖。
其实在安装完依赖之后，会执行 package.json里的 prepare 命令钩子。
例如在 package.json 中设置 👇
{
"scripts": {
"prepare": "node foo.js"
}
}
并创建 foo.js 👇
console.log(1)
执行 npm install 后，将输出 1
由比如在 nuxt3 中，我们会设置 prepare 命令钩子在安装依赖后自动生成类型声明文件 👇
{
"scripts": {
"prepare": "nuxi prepare"
}
}
通过这样的机制，我们就可以将现有的项目功能按需生成 🥰
这在
yarn和pnpm中也是通用的
break
在现有项目中，我们在更新时会保持原有功能的使用不变，但这一定程度上阻碍了我们引入更好的方案。
在新的版本中，一切都是按需生成的，所以新方案的引入会更加的顺畅自然。
unified
在现有项目中，我们可能会在运行时中引入通用的功能，例如动态修改 title，进度条等。
它们被零散地分布在各个文件，一方面这使得功能的分享变得复杂，一方面让维护变得困难。
所以在新的版本中，也许我们会有更规范的 modules 或者 plugins 机制统一地管理它们。
less
pnpm
在现有项目中，我们支持了 npm，yarn 和 pnpm。
各个包管理器存在不一样的差异，这使得功能的测试和维护变得繁杂且困难。
而且由于项目环境基于 pnpm，我们很难保证在 npm 和 yarn 使用过程中出现我们未测试到的 bug。
所以为了对齐彼此的开发环境也为了让项目的维护变得简单，在新的版本中我们将有且仅支持 pnpm。
config
在现有项目中，存在着非常非常多的配置文件。
这些配置文件对应着不同功能，即使这些功能并非我们所需要的，我们也不得不付出管理的成本。
即使我们 explorer.fileNesting 使得配置文件嵌套起来隐藏，但是这似乎并不算完美。
在新的版本中，我们希望我们保持尽量少的配置文件，让一切配置文件都是按需出现。
启发
该 RFC 受以下项目启发
