为什么 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"]
}

为什么我们需要两个？

第二个是做什么的？

我可以删除第二个吗？

Answer 1

您需要两个不同的 TS 配置，因为该项目使用两个不同的环境来执行 TypeScript 代码：

1. 您的应用程序（src文件夹）的目标是（将在浏览器内运行）
2. Vite 本身（包括其配置）在您的计算机上的 Node 内运行，这是完全不同的环境（与浏览器相比），具有不同的 API 和约束

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

不，您可能不想删除，tsconfig.node.json但您可以将其重命名为类似的名称tsconfig.vite.json，以使其用途更加明确。如果这样做，请确保相应地更新“主”配置

Answer 2

正如 Michal Lev\xc3\xbd 所提到的，这些是针对不同环境的不同配置。

\n

您会注意到其中tsconfig.json包含一个“引用”键，该键指向一个包含以下内容的数组tsconfig.node.json文件的数组。如果您想更改 vite tsconfig 的文件名，请务必更新此参考。

\n