为什么Vite要创建两个TypeScript配置文件: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部分定义的两组源文件。然后有一个"大师";configtsconfig.json"规则所有">

不，您可能不想删除tsconfig.node.json，但您可能可以将其重命名为tsconfig.vite.json之类的东西，以使其目的更清楚。如果需要，请确保更新"main";配置相应的

Answer 2

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

您会注意到tsconfig.json包含了一个"参考文献"。键，它指向一个包含tsconfig.node.json文件的数组。如果您希望更改您的vite tsconfig的文件名，请确保更新此引用。