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

【问题标题】：Why does Vite create two TypeScript config files: tsconfig.json and tsconfig.node.json?为什么 Vite 会创建两个 TypeScript 配置文件：tsconfig.json 和 tsconfig.node.json？
【发布时间】：2022-06-25 21:39:56
【问题描述】：

我正在使用 Vite 创建a new React + TypeScript project。

创建项目后，根文件夹下有两个 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"]
}

为什么我们需要两个？

第二个是做什么的？

我可以删除第二个吗？

【问题讨论】：

tsconfig.node.json 只是tsconfig.json 的扩展。是否可以删除，我会说不能，因为vite.config.ts的inlude只存在于node.json中

标签： javascript typescript tsconfig vite

【解决方案1】：

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

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

所以这两个环境有两个不同的配置和两组不同的源文件...

不，您可能不想删除 tsconfig.node.json，但您可以将其重命名为 tsconfig.vite.json 之类的名称，以使其目的更明确

【讨论】：

如果我们将tsconfig.node.json 重命名为tsconfig.vite.json，我们是否也必须在 package.json 中的构建脚本中进行任何更改？否则vite如何识别重命名的文件？

【解决方案2】：

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

您会注意到tsconfig.json 包含一个“references”键，它指向包含tsconfig.node.json 文件的数组。如果您希望更改 vite tsconfig 的文件名，请务必更新此参考。

【讨论】：