typescript, 配置文件 tsconfig.json

在 TypeScript 开发中，tsconfig.json 是个不可或缺的配置文件，它是我们在 TS 项目中最常见的配置文件。

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译:

tsc app.ts -w

上述示例，当 app.ts 文件发生改变时会自动编译

配置选项

{
"include":["src/**/*", "tests/**/*"],
"exclude": ["./src/hello/**/*"],
"extends": "./configs/base",
,"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
   ]
  ,"compilerOptions": {

       "outDir": "./dist",      
        "outFile": "",
        "removeComments": true,
        "target": "ES6",
        "lib": [],
        "module": [],
        "allowJs": false,
        "checkJs": false,
        "noEmit": false,                 
        
    } 
}

include

• 编译文件所在的目录

示例：

{
 "include":["src/**/*", "tests/**/*"]
}

上述示例中，所有src目录 和 tests 目录下的文件都会被编译

exclude

• 与 include  正好相反 ，定义哪些目录下 不会被编译

示例：

{
 "exclude": ["./src/hello/**/*"] 
}

上述示例中，src 目录下的  hello 目录下的文件都不会被编译

extends

• 定义被继承的配置文件

示例：

{
 "extends": "./configs/base"
}

上述示例中，当前配置文件中会自动包含 config 目录下 base.json 中的所有配置信息

files

• 指定被编译文件的列表，只有需要编译的文件少时才会用到

示例：

{
"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
}

files 列表中的文件都会被TS编译器所编译

compilerOptions

• 编译选项是配置文件中非常重要也比较复杂的配置选项
• 在compilerOptions中包含多个子选项，用来完成对编译的配置

target

• 设置ts代码编译的目标版本
• 默认值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

示例：

{
"compilerOptions": {
   "target": "ES6"
  }
}

上述示例中，我们所编写的ts代码将会被编译为 ES6 版本的 js 代码

lib

• 代码运行时所包含的库
• 默认值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost……

示例：

{
"compilerOptions": {
    "lib": ["ES6"],
  }
}

module

• 设置编译后代码使用的模块化系统
• 默认值：CommonJS、UMD、AMD、System、ES2020、ESNext、None

示例：

{
"compilerOptions": {
    "module": "CommonJS"
  }
}

outDir

• 编译后文件的所在目录
• 默认：编译后的js文件会和ts文件位于相同的目录，设置 outDir 后可以改变编译后文件的位置

示例：

{
"compilerOptions": {
    "outDir": "dist"
  }
}

上述示例中，编译后的js文件将会生成到 dist 目录

outFile

• 将所有的文件编译为一个js文件
• 默认：会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中

示例：

{
"compilerOptions": {
    "outFile": "dist/app.js"
  }
}

上述示例中，将所有 .ts 文件 编译成 dist目录下 app.js 文件

allowJs 

• 允许编译JS 文件

checkJs

• 是否对js文件进行检查

示例：

{
"compilerOptions": {
     "allowJs": false,
      "checkJs": false,
  }
}

 removeComments

• 编译的时候，是否删除注释 ，
• 默认：false

示例：

{
"compilerOptions": {
     "removeComments": false 
  }
}