小技巧之“更方便地重用 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,这样就可以在多个项目中复用该配置,提高开发效率的同时,也可以更好地管理配置文件。

相关推荐
乐闻x5 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚7 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd79422 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You30 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生42 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js