小技巧之“更方便地重用 tsconfig.json ”

tsconfig.json 作为 TS 项目的标配，控制着项目的编译等逻辑。

一个常见的 tsconfig.json 文件中往往有许多配置，具体的字段说明，参考： www.typescriptlang.org/tsconfig

一个 tsconfig.json 示例如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "declaration": true,
    "declarationDir": "./typings",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["./src"]
}

每个 TS 项目的根目录下都有 tsconfig.json 配置文件，并且大同小异，每次创建新项目，从旧项目拷贝一份配置文件到新项目成了一种“标准操作”。是否有办法减轻这种拷贝文件的负担呢？

extends

tsconfig.json 中提供了 extends 字段，用来“复用”已有的配置文件。

关于 extends 字段，参考：www.typescriptlang.org/tsconfig#ex…

extends 字段可以是一段相对路径，例如：

{
    // 表示当前的 tsconfig.json 文件，是基于同文件夹下的 tsconfig.default.json 拓展而来的
    "extends": "./tsconfig.default.json"
}

按照官方文档的说法，extends 字段支持类似于 Node Resolution 的解析方案，也就是说，其实可以向 extends 中传入一个 node module 包的名字。

{
    // 表示基于 @my-pkg/tsconfig 包拓展而来
    "extends": "@my-pkg/tsconfig"
}

以 node module 方式引用

一个 node module 的入口文件可以由 package.json 中的 main 字段指定，如果按照这样的文件结构：

@my-pkg/tsconfig
- index.json # 包含 tsconfig.json 配置信息
- package.json

并在 package.json 中指明 "main": "./index.json" 后

// index.json
{
    "name": "@my-pkg/tsconfig",
    "main": "./index.json"
}

尝试引用该 node module 时会报错，因为 index.json 不符合 commonjs 规范。但这并不意味着 node module 方案无法使用，只需要简单调整一下。

将文件结构调整为：

@my-pkg/tsconfig
- index.json # 包含 tsconfig.json 配置信息
- index.js
- package.json

并将 package.json 中的 main 修改为 index.js 或者不设置（默认为 index.js ）

// index.json
{
    "name": "@my-pkg/tsconfig",
    "main": "./index.js"
}

此时，使用 subpath 形式在 extends 中引用 node module 中的配置文件不会再报错：

    // 表示基于 @my-pkg/tsconfig 包中 index.json 文件拓展而来
    "extends": "@my-pkg/tsconfig/index.json"

小结

使用 node module 方案，打造独属于自己的 tsconfig.json，这样就可以在多个项目中复用该配置，提高开发效率的同时，也可以更好地管理配置文件。

原文链接：https://juejin.cn/post/7333761832472690688 作者：forzoom