tsconfig.build.json 和 tsconfig.json 的区别是什么，为啥分为两个？

tsconfig.json 和 tsconfig.build.json 都是 TypeScript 编译器的配置文件，它们用于定义 TypeScript 项目的编译选项和规则。虽然它们的核心功能相同，但通常情况下，项目中会有多个 tsconfig 文件，如 tsconfig.build.json，以满足不同编译场景的需求。下面是它们之间的一些关键区别：

目的与用途:
- tsconfig.json: 这是默认的 TypeScript 配置文件，用于项目的常规开发和调试。它通常包含了适用于大部分开发阶段的编译选项，如编译目标（target）、模块系统（module）、源文件路径（include/exclude）等。开发人员在日常工作中直接使用此配置进行类型检查、代码补全、错误提示等。
- tsconfig.build.json: 这是一个特定于构建过程的配置文件，通常用于项目的生产构建或打包。它可能包含了一些仅在构建阶段才需要的编译选项或更严格的编译规则，以确保生成的 JavaScript 代码在生产环境中具备最佳性能、最小体积或特定的兼容性要求。例如，可能会启用更激进的压缩选项、移除未使用的代码（tree-shaking）或者设置特定的编译目标（如 ES5 以兼容旧版浏览器）。

继承与覆盖:

tsconfig.json: 作为主配置文件，它可能被其他特定用途的 tsconfig 文件（如 tsconfig.build.json）通过 extends 关键字继承。这意味着子配置文件可以从 tsconfig.json 中继承基础配置，并在其基础上添加、修改或覆盖特定选项。

tsconfig.build.json: 通常会通过 extends 关键字继承自 tsconfig.json，以减少重复配置，并专注于与构建相关的特定差异。例如：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es5", // 更广泛的浏览器兼容性
    "module": "esnext", // 用于现代打包工具的模块格式
    "declaration": true, // 生成类型声明文件（.d.ts）
    "sourceMap": false, // 生产环境下可能不需要源码映射
    // 其他构建相关的选项...
  },
  "exclude": ["**/*.spec.ts"], // 在构建时排除测试文件
  // 其他构建相关的规则...
}

执行与管理:
- tsconfig.json: 通常与开发流程紧密关联，IDE（如 Visual Studio Code）会自动检测并使用此文件来进行类型检查和代码提示。开发人员在运行 tsc 命令时如果不指定特定配置文件，编译器也会默认使用 tsconfig.json。
- tsconfig.build.json: 通常在构建脚本（如 npm run build 或 gulp、webpack 等构建工具的任务）中显式指定。这些脚本会调用 tsc 命令并传入 tsconfig.build.json 文件路径，以确保使用构建专用的配置进行编译。

tsc -p tsconfig.build.json

"build:types": "tsc -p tsconfig.build.json && cpr lib esm",

总结来说，tsconfig.json 和 tsconfig.build.json 分开的主要原因是为了解耦开发环境与构建环境的编译配置，允许针对不同场景设置最适合的编译选项和规则。
这样既能保证开发阶段的便捷性和灵活性，又能确保生产环境下的代码质量和性能要求。通过合理的继承和覆盖机制，可以避免重复配置，保持配置文件的组织结构清晰。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "declarationDir": "lib",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "paths": {
      "@zzzzw/happy-ui": ["src/index.ts"],
      "@@/*": [".dumi/tmp/*"]
    }
  },
  "include": ["src", "typings.d.ts"],
  "exclude": ["node_modules", "lib", "esm", "dist", "typings", "**/__test__", "test", "tests"]
}

tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": { "emitDeclarationOnly": true },
  "exclude": ["**/__tests__/**", "**/demo/**", "node_modules", "lib", "esm"]
}

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18115912.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！