为什么Vite会创建两个TypeScript配置文件：tsconfig.json和tsconfig.node.json？

Question

我正在使用Vite来创建一个新的React + TypeScript项目。

在创建项目后，根目录中有两个TypeScript配置文件：tsconfig.json和tsconfig.node.json。以下是每个文件的内容：

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
    "compilerOptions": {
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node"
    },
    "include": ["vite.config.ts"]
}

我们为什么需要两个？

第二个有什么作用？

我能移除第二个吗？

- rodrigocfd

---

tsconfig.node.json 只是 tsconfig.json 的扩展。我认为你不能删除它，因为 vite.config.ts 的包含只存在于 node.json 中。 - Panomosh

有用的链接 https://github.com/vitejs/vite/issues/2031 - Akshay Vijay Jain

https://github.com/vitejs/vite/issues/6828 - Akshay Vijay Jain

Answer 1

你需要两个不同的TS配置文件，因为项目在执行TypeScript代码时使用了两个不同的环境：

1. 你的应用程序（src文件夹）将在浏览器内运行。 2. Vite本身以及其配置将在计算机内的Node环境中运行，这是与浏览器完全不同的环境，具有不同的API和限制。

因此，针对这些环境有两个单独的配置文件和两组源文件，这些文件由这些配置文件的"include"和"exclude"部分定义。然后，有一个"主"配置文件tsconfig.json来"统治它们所有"。

不，你可能不想删除tsconfig.node.json，但你可以将其重命名为tsconfig.vite.json之类的名称，以使其目的更清晰。如果你这样做，请确保相应地更新"main"配置文件。

- Michal Levý

---

如果我们将 tsconfig.node.json 重命名为 tsconfig.vite.json，那么在 package.json 的构建脚本中是否需要进行任何更改？否则，vite 如何识别已重命名的文件？ - Haris

@Haris TS编译器会加载所有配置（在我当前的Vite设置中，至少有一个主要的tsconfig.json文件引用了所有其他配置），并根据它们内部的“exclude”和“include”掩码将它们应用于文件... 我的翻译意思是：TS编译器会根据各个配置文件内部的“exclude”和“include”掩码来加载并应用它们到文件中。在我的当前Vite设置中，有一个主要的tsconfig.json文件，它引用了所有其他配置文件。 - Michal Levý

我注意到在构建时存在两个文件 vite.config.d.ts 和 vite.config.js。我应该将这两个文件都提交到 git 吗？ - undefined

Answer 2

如 Michal Levý 所述，这些是针对不同环境的不同配置。

您会注意到，tsconfig.json 包括一个“references”键，该键指向一个包含 tsconfig.node.json 文件的数组。如果您想更改 vite tsconfig 的文件名，请确保更新此引用。

- timbhison

---

我认为"references"键是不必要的。从文档中看来，"references"用于指定项目之间的依赖关系，比如一个项目使用另一个项目的类型。但实际上这里并没有依赖关系。 - undefined