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

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

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

一个 tsconfig.json 示例如下:

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 字段可以是一段相对路径,例如:

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

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

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

以 node module 方式引用

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

bash 复制代码
@my-pkg/tsconfig
- index.json # 包含 tsconfig.json 配置信息
- package.json

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

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

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

将文件结构调整为:

bash 复制代码
@my-pkg/tsconfig
- index.json # 包含 tsconfig.json 配置信息
- index.js
- package.json

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

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

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

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

小结

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

相关推荐
我要洋人死35 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#