为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件

为什么 Vite + Vue + Ts 项目会有三个 tsconfig 文件？

在使用 Vite 创建 vue-ts 模板的项目时，会发现除了 tsconfig.json 外，还有一个 tsconfig.node.json 和 tsconfig.app.json 文件。并在 tsconfig.json 使用了 references 字段引用了其他两个文件

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

• Re:

首先我们先了解什么是 tsconfig.json ?

tsconfig.json 是 TypeScript 项目的配置文件，放在项目的根目录。主要供tsc编译器使用。 简单的用例：

{
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es5"
  },
  "include": ["./src/**/*"]
}

示例的四个属性的含义。

• include：指定哪些文件需要编译。
• allowJs：指定源目录的 JavaScript 文件是否原样拷贝到编译后的目录。
• outDir：指定编译产物存放的目录。
• target：指定编译产物的 JS 版本。

TypeScript 3.0 新增的 项目引用（Project References） 功能，它允许用户为项目的不同部分使用不同的 TypeScript 配置。

• 关于 tsconfig.node.json, 注意到 "include": ["vite.config.ts"] 这段代码，它说明 tscnofig.node.json 是专门用于 vite.config.ts 这一文件的 TypeScript 配置文件。
• 关于 tsconfig.app.json, 注意到 "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 这段代码，它说明 tscnofig.app.json 是专门用于 src 代码文件的。

故而，如果要控制 src 文件夹下的文件的编译行为的时候，就需要在 tsconfig.app.json 文件中添加对应的配置；反之，如果要控制 vite.config.ts 的编译行为就在 tsconfig.node.json 中添加配置。

• 实例：vite+ts+vue 项目，使用 Vuex 库的时候出现 无法找到模块“vuex”的声明文件。 的问题

在 tsconfig.app.json 中添加 "vuex":["./node_modules/vuex/types"], 即可。

{
  "compilerOptions": {

    "paths":{
      "vuex":["./node_modules/vuex/types"],
    },
  }
}

故而，我们可以认为 tsconfig.node.json 和 tsconfig.app.json 只是作用在不同文件范围的编译配置文件。如果按照以往的单个 tsconfig.json 配置的形式就无法根据模块或者部分文件进行特殊的编译处理。

• Other Q

但是这里仍然有一个问题，针对 vite.config.ts 的 tsconfig.node.json 有什么特殊的地方需要针对它单独的分离出一个配置文件？

tsconfig.node.json 和 tsconfig.app.json 的分离的含义是区分 浏览器环境 和 node 环境吗？