ToB企服应用市场:ToB评测及商务社交产业平台

标题: tsconfig.json和tsconfig.app.json文件解析（vue3+ts+vite） [打印本页]
作者: 锦通    时间: 2024-7-16 05:50
标题: tsconfig.json和tsconfig.app.json文件解析（vue3+ts+vite）
 
tsconfig.json
  1. {
  2.   "files": [],
  3.   "references": [
  4.     {
  5.       "path": "./tsconfig.node.json"
  6.     },
  7.     {
  8.       "path": "./tsconfig.app.json"
  9.     }
  10.   ]
  11. }
复制代码
https://www.typescriptlang.org/tsconfig/#files
 
files: 在这个例子中，files 数组是空的。这意味着此设置文件本身不直接包含任何 TypeScript 文件。这是由于它作为一个顶层项目设置，用于引用其他的 TypeScript 设置文件，而不是直接处理文件。

https://www.typescriptlang.org/tsconfig/#references


references: 这个属性包含了一个对象数组，每个对象指向一个差别的 tsconfig 文件。这表明当前项目依靠于这些子项目或设置。每个引用都通过 path 属性指定，指向一个子项目标 tsconfig.json 文件。

tsconfig.app.json:
  1. {
  2.   "extends": "@vue/tsconfig/tsconfig.dom.json",
  3.   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  4.   "exclude": ["src/**/__tests__/*"],
  5.   "compilerOptions": {
  6.     "experimentalDecorators": true,
  7.     "composite": true,
  8.     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
  10.     "baseUrl": ".",
  11.     "paths": {
  12.       "@/*": ["./src/*"]
  13.     }
  14.   }
  15. }
复制代码
https://www.typescriptlang.org/tsconfig/#extends

"extends": "@vue/tsconfig/tsconfig.dom.json": 这表明该设置继承自一个预设的 TypeScript 设置，专为在 DOM 情况中运行的 Vue 应用程序设计。这个预设可能包含了一套推荐的编译器选项，适用于大多数 Vue 项目，如恰当的 lib 选项（比如包含 dom 和其他欣赏器情况的范例定义），以及为 Vue 文件和 DOM API 使用的最佳实践

https://www.typescriptlang.org/tsconfig/#include

"include": ["src/**/*", "src/**/*.vue", "types/**/*.d.ts"]: 指定了 TypeScript 编译器应该包含哪些文件。这里包罗了项目标 src 目录下的所有文件（无论何种扩展名），所有 Vue 组件文件（.vue），以及 types 目录下的所有 TypeScript 声明文件（.d.ts）。这确保了项目中所有相关的文件都将被 TypeScript 处理。

https://www.typescriptlang.org/tsconfig/#exclude

"exclude": ["src/**/__tests__/*"]: 清除了所有在 __tests__ 目录下的文件，这通常是单元测试文件所在的地方。这样做可以防止测试文件被编译到生产构建中，同时也可能加速编译过程，由于测试文件不会被 TypeScript 处理。
https://www.typescriptlang.org/tsconfig/#experimentalDecorators

装饰器支持（Decorator Support）：装饰器是一种特殊的语法，用于修改类、方法、属性等的行为。在tsconfig.json中，你可以使用"experimentalDecorators"选项来启用装饰器的支持。将该选项设置为true后，你就可以在代码中使用装饰器。
TypeScript: TSConfig Reference - Docs on every TSConfig option

"composite": true: 启用了项目标组合模式，这对于大型项目大概当你想要将项目分割成多个子项目时非常有用。它允许 TypeScript 项目引用其他 TypeScript 项目，便于代码的模块化和重用。
https://www.typescriptlang.org/tsconfig/#tsBuildInfoFile

"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo": 指定了 TypeScript 构建信息文件的存放位置。这个文件用于存储关于项目标增量编译信息，可以资助 TypeScript 编译器快速地执行后续的编译，进步构建性能


https://www.typescriptlang.org/tsconfig/#baseUrl

"baseUrl": ".": 设置了模块解析的基准目录为项目标根目录。这是 paths 映射的基础。

https://www.typescriptlang.org/tsconfig/#paths 

"paths": {"@/*": ["./src/*"]}: 提供了一个别名设置，允许在项目中使用 @ 前缀来引用 src 目录下的文件。这是一种常见的做法，可以使得在项目中引用模块时的路径更简洁明了。


人工智能学习网站
https://chat.xutongbao.top

参考链接
https://blog.csdn.net/shaoshaoh/article/details/136374954



 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4