tsconfig.json和tsconfig.node.json和tsconfig.app.json有什么区别

通过pnpm i vite 生成vue3项目时,会生成三个ts配置文件,分别是什么作用呢?

在Vue 3项目中,tsconfig.jsontsconfig.node.jsontsconfig.app.json是三个不同的TypeScript配置文件,它们分别用于不同的场景和目的。其中tsconfig.node.json是专门用来配置vite.config.ts文件的编译规则,tsconfig.app.json则是用来定义项目中其他文件的ts编译规则。后面两个文件最终会被引入到tsconfig.json中

tsconfig.json主要配置文件 基础共享配置

tsconfig.json是Vue 3项目的默认TypeScript配置文件。它包含了项目的全局配置,如编译选项、模块解析规则、类型检查规则等。这个配置文件适用于整个项目,包括Vue组件、JavaScript文件和其他TypeScript文件。

js 复制代码
/* 
 文件作用
  共享基础配置: 通过引用子配置文件,tsconfig.json 提供了一个统一的入口,避免重复配置。
  分离环境配置: 将前端代码和 Node.js 环境的配置分开,便于针对性优化和管理。
  支持增量编译: 使用 references 可以启用 TypeScript 的增量编译功能,提高大型项目的编译性能。
*/
{
   // 用于显式指定需要包含在 TypeScript 编译中的文件。
  "files": [],
  // 项目引用(Project References)的配置,用于支持多配置文件的项目结构。
  // 通过这种方式,tsconfig.json 作为主配置文件,统一管理了子配置文件的依赖关系。
  "references": [
    // 用于配置前端代码(如 Vue 组件)的 TypeScript 编译规则。
    { "path": "./tsconfig.app.json" },
    // 用于配置 Node.js 环境(如 vite.config.ts)的 TypeScript 编译规则
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.node.json 检查 vite.config.ts 等构建配置文件

tsconfig.node.json是专门用于Node.js环境的TypeScript配置文件。它包含了Node.js特有的配置,如模块解析规则、类型检查规则等。这个配置文件通常用于处理Node.js模块,如node_modules中的第三方库。

js 复制代码
{
  "compilerOptions": {
    // 指定TypeScript编译器生成的tsbuildinfo文件的路径
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    /* target用于指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.  */
    "target": "ES2022",
    // 指定要包含在编译中的库文件,这里包含ES2023
    "lib": ["ES2023"],
    /* 用来指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "module": "ESNext",
    // 跳过对库文件的类型检查 提高编译速度
    "skipLibCheck": true,

    /* Bundler mode  设置模块解析策略*/
    // 使用bundler模式进行模块解析 表示使用捆绑工具(如 Vite 或 Webpack)的模块解析方式,而不是传统的 Node.js 模块解析方式
    "moduleResolution": "bundler",
    // 允许导入带有.ts扩展名的文件
    "allowImportingTsExtensions": true,
    // 强制将每个文件视为单独的模块
    "isolatedModules": true,
    // 强制进行模块检测
    "moduleDetection": "force",
    // 不生成输出文件
    "noEmit": true,

    /* Linting */
    /* strict的值为true或false,用于指定是否启动所有类型检查,如果设为true则会同时开启下面这几个严格类型检查,默认为false */
    "strict": true,
    /* 用于检查是否有定义了但是没有使用的变量,对于这一点的检测,使用eslint可以在你书写代码的时候做提示,你可以配合使用。它的默认值为false */
    "noUnusedLocals": true,
    /* 用于检查是否有在函数体中没有使用的参数,这个也可以配合eslint来做检查,默认为false */
    "noUnusedParameters": true,
    /* 用于检查switch中是否有case没有使用break跳出switch,默认为false */
    "noFallthroughCasesInSwitch": true,
    // 禁止未检查的副作用导入
    // 如果你导入了一个模块但没有使用其导出的内容,TypeScript 会提示你检查该导入是否必要。
    // 这有助于避免不必要的导入,减少潜在的副作用,提高代码的可维护性和安全性。
    "noUncheckedSideEffectImports": true
  },
  // 指定要包含在编译中的文件,这里包含vite.config.ts
  "include": ["vite.config.ts"]
}

tsconfig.app.json 检查 src/ 目录下的前端代码

tsconfig.app.json是专门用于Vue组件的TypeScript配置文件。它包含了Vue组件特有的配置,如模块解析规则、类型检查规则等。这个配置文件通常用于处理Vue组件文件,如.vue文件。

js 复制代码
{
  // 继承自 @vue 的 tsconfig.dom.json 配置文件,用于配置 TypeScript 编译选项
  "extends": "@vue/tsconfig/tsconfig.dom.json", 
  "compilerOptions": {
    // 指定 TypeScript 编译信息的存储文件路径
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 
    /* Linting */
    /* strict的值为true或false,用于指定是否启动所有类型检查,如果设为true则会同时开启下面这几个严格类型检查,默认为false */
    "strict": true,
     /* 用于检查是否有定义了但是没有使用的变量,对于这一点的检测,使用eslint可以在你书写代码的时候做提示,你可以配合使用。它的默认值为false */
    "noUnusedLocals": true,
     /* 用于检查是否有在函数体中没有使用的参数,这个也可以配合eslint来做检查,默认为false */
    "noUnusedParameters": true,
    /* 用于检查switch中是否有case没有使用break跳出switch,默认为false */
    "noFallthroughCasesInSwitch": true,
    // 禁用未检查的副作用导入
     // 如果你导入了一个模块但没有使用其导出的内容,TypeScript 会提示你检查该导入是否必要。
    // 这有助于避免不必要的导入,减少潜在的副作用,提高代码的可维护性和安全性。
    "noUncheckedSideEffectImports": true 
  },
  // 指定要包含在编译中的文件,包括 src 目录下的所有 .ts、.tsx 和 .vue 文件
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 
}
相关推荐
黄同学real7 分钟前
Vue 项目中运行 `npm run dev` 时发生的过程
前端·vue.js·npm
黄同学real29 分钟前
vue 优化策略,大白话版本
前端·javascript·vue.js
xcLeigh38 分钟前
HTML5好看的水果蔬菜在线商城网站源码系列模板8
java·前端·html5
周胡杰1 小时前
鸿蒙文件上传-从前端到后端详解,对比jq请求和鸿蒙arkts请求区别,对比new FormData()和鸿蒙arktsrequest.uploadFile
前端·华为·harmonyos·鸿蒙·鸿蒙系统
2501_915373882 小时前
electron+vite+vue3 快速入门教程
前端·javascript·electron
zhl9999999992 小时前
xe-upload上传文件插件
前端·上传文件·xe-upload·兼容app上传文件
徐_三岁3 小时前
Vue3 + TypeScript 实现 PC 端鼠标横向拖动滚动
vue.js·typescript
宁酱醇4 小时前
CSS基础_@拉钩教育【笔记】
前端·css
建群新人小猿4 小时前
CRMEB-PRO系统定时任务扩展开发指南
android·java·开发语言·前端
牧天白衣.4 小时前
vue 和 html 的区别
前端