小技巧之“更方便地重用 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

(0)
上一篇 2024年2月14日 上午11:11
下一篇 2024年2月14日 下午4:06

相关推荐

发表回复

登录后才能评论