搞懂tsconfig.json的常用配置项

指尖轻敲
305 阅读3分钟

前几天写了一篇《解密的TS声明文件》，虽然是基础的内容但是对于自己学习TS还是很有帮助的，至少不会看到声明文件一脸懵，不会在写的时候只知道复制粘贴。

在ts项目开发中tsconfig.json配置文件同样很重要，且经常需要配置它。很多时候也是比较懵的状态，那么多属性都是干什么的呀？本次就来把一些常用的配置搞懂它！

tsconfig.json

tsconfig.json 是 tsc 供编译器使用的，默认会在当前目录下查找，找不到会向上一级目录查找。如果在 tsc 命令后加 -p 参数，可以指定一个包含 tsconfig.json 配置文件的目录。

属性介绍

示例1（files、include、exclude）：
{
    "include": ["./src/**/*"],
    "exclude": [ "node_modules", "**/*.spec.ts" ],
    "files": ["a.ts", "b.ts"]
}
  • files: 指定一个需要被编译的文件路径的列表
  • include：指定哪些文件需要编译，支持glob通配符。（文件中引用的其他文件也会被编译，除非被exclude）

image.png

  • exclude: 和include相对，哪些不需要编译，也支持通配符

这三个属性的优先级是：files > exclude > include，如果在include中包含的文件，可以在exclude中排除掉，但是在files中指定的文件，则无法排除。

示例2（extends、references）
{
    extends: "./baseconfig.json",
    references: [{
        path: "../other_pck1", // 文件名不写也可以
        path: "../other_pck2/tsconfig.json",
    }]
}
  • extends: 从其他配置文件中继承配置，本文件中的配置会覆盖继承的文件配置。
  • references：多包的情况下，引用所依赖的项目。编译器会先编译依赖的项目。依赖的项目必须设置compilerOptions.composite: true，表示此项目是一个可引用的复合项目。
示例3（compilerOptions）：
{
    "compilerOptions": {
        "target": "ESNext",
        "types": ["node", "lodash"],
        "typeRoots": ["./typings"],
        "module": "ESNext",
        "lib": ["dom", "es6"],
        "rootDir": "./",
        "allowJs": true,
        "declaration": true,
        "declarationDir": "./types",
        "baseUrl": "./",
        "moduleResolution": "nodenext",
        "paths": {
            "@utils/*": ["utils/*"]
        },
        "resolveJsonModule": true,
        
    }
}

  • target：要编译输出的ECMAScript 目标版本。

  • types: 默认情况下，node_modules/@types下所有包都会被编译，包括所有父级的node_modules。如果使用types指定报名，则只有node_modules/@types/node和lodash会被引入。

  • typeRoots: 如果使用typeRoots指定目录，则不会自动从node_modules/@types下引包，而是引入./typings下所有的包。

  • module：指定编译输出的模块格式，"None" | "CommonJS" | "AMD" | "UMD" | "System" | "ES6"/"ES2015"|"ESNext"，影响模块的导入和导出。

  • lib：包含在编译中的内置库文件列表，和 /// 作用一样。

  • rootDir：指定编译时输入源文件的根目录。只有根目录下的文件才会被编译。

  • allowJs: 允许Ts项目加载js文件

  • declaration: 自动生成声明文件

  • baseUrl: 解析非相对路径引入的模块名的基础目录

// 设置baseUrl为./ ，将会以./为基础路径查找my-js模块
import { aaa } from "my-js"
  • moduleResolution: 解析模块的策略，即tsc在解析时遇到import语句怎么解析，新项目尽量写node16/nodenext，如果写的是node，那么module需要是commonjs，否则代码执行会报错。（module是输出目标文件的模式）
  • paths: 设置模块名和模块路径的映射，相当于别名。是依赖baseUrl的。
  • resolveJsonModule: 允许import引入JSON类型文件

以上是我认为比较有用且常用的属性配置，当然ts的配置还有很多这里就不一一列举了，有些看名字就知道是怎么回事。有错误和不足的地方欢迎指出。

avatar
文章
阅读
粉丝