概要
对使用Vite创建Vue3+TS项目时的自动生成的配置文件进行解析
整体流程
- 通过Vite工具创建项目
- 分析目录结构
文件细节
- tsconfig.json
- 在tsconfig文件中导入./tsconfig.node.json和./tsconfig.app.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}
- tsconfig.app.json
- 在compilerOptions定义中
- baseUrl和paths便于代码提示
- tsBuildInfoFileTS生成信息文件,用于存储增量编译信息
- composite用于被导入时,该文件可以被融合
- 该文件很像老版本的tsconfig文件,现在抽离出来了
- include
- 告诉ts哪些文件需要编译
- extends
- 继承自哪里
- exclude
* 指定解析时应跳过的文件名或模式数组
- 在compilerOptions定义中
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
- tsconfig.node.json
- 用于ssr渲染
{
"extends": "@tsconfig/node20/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
- env.d.ts
- 放类型定义文件
- 如果下载了插件TypeScript Vue Plugin (Volar),则可以不用申明vue模块
- Volar:
- 一个TS服务器插件,使TS服务器知道*.vue文件。
- 在*.ts文件中查找引用时,还可以从*.vue文件中获得结果。
- 在*.ts文件中重命名时,*.vue文件上的引用也会进行调整。
- 当键入导入语句时,*.vue文件也会出现以自动完成
/// <reference types="vite/client" />
//配置vue文件模块
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent
export default component
}
小结
本文对使用Vite创建的Vue3+Ts项目的配置文件进行部分解析
由于作者水平有限:
如果本文有任何问题可以私信我或者评论区留下你的看法
本文如果对你有帮助,麻烦点个赞和收藏方便回看,求关注 谢谢