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