# 问题集1

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

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

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

- **Re:**

首先我们先了解什么是 [tsconfig.json](https://typescript.p6p.net/typescript-tutorial/tsconfig.json.html) ?

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

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

示例的四个属性的含义。

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

TypeScript 3.0 新增的 [项目引用](https://www.typescriptlang.org/docs/handbook/project-references.html)（**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"],` 即可。

```json
{
  "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 环境吗？