编译选项
文件夹中只有一个index.ts文件 —> 编译index.js文件
一旦更改,需要再次编译。
命令: tsc index.ts
实时监听ts文件的变化。
命令: tsc index.ts -w
文件夹中有多个文件 —> 编译所有对应的js文件
需要在文件夹根目录创建
命令: tsc
实时监听所有文件的变化
命令: tsc -w
配置选项
1、include(包含)
- 定义: 编译文件所在目录下的文件。
注:用来指定ts文件目录进行编译 - 默认值: ["*/"]
注:表示任意文件
表示任意目录
- 示例:
"include": ["src/**/*", "test/**/*"]
- 上述示例中,所有的src目录和test目录下的文件都会被编译。
2、exclude(不包含)
- 定义: 不需要被编译的文件目录。
注:用来指定ts文件目录不进行编译 - 默认值: ["node_modelus", "bower_components", "jspm_packages"]
- 示例:
"exclude": ["./src/page/**/*"]
- 上述示例中,src/page 目录下的文件都不会被编译。
3、extends
- 定义:被继承的配置文件
- 场景:多个配置文件(tsconfig.json/config.json...)tsconfig.json要使用config.json中的配置,不想重复定义,用extends继承。(类似于引入外部文件)
- 示例:
"extends": "./configs"
- 上述:当前配置文件会自动包含config目录下base.json中的所有配置信息。
4、files (类似于include)
- 定义:指定被编译文件的列表,只要需要编译的文件少时才会用到。
- 示例:
"files": [ "core.ts", "app.ts", "index.ts", "text.ts" ]
- 列表中的文件都会被TS编译器所编译。
5、compilerOptions
定义:编译选项是配置文件中非常重要且复杂的配置选项。
-
在compilerOptions中包含多个子选项,用来完成对编译的配置。
项目选项
(1)target
- 定义:设置ts代码编译的目标版本。
- 可选值:ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
- 示例:
"compilerOptions": { "target": "ES6" }
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码。
- 列表中的文件都会被TS编译器所编译。
(2)lib
- 定义:指定代码运行时多包含的库。(宿主环境)
- 可选值:ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、webWorker、ScriptHost.....
- 示例:
"compilerOptions": { "target": "ES6", "lib": ["ES6","DOM"], "outDir": "dist", "outFile": "dist/index.js", }
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码。
- 列表中的文件都会被TS编译器所编译。
(3)module
- 定义:设置编译后代码使用的模块化系统。
- 可选值:CommonJS、UMD、AMD、SESES、None.....
- 示例:
"compilerOptions": { "module": "CommonJS" }
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码。
- 列表中的文件都会被TS编译器所编译。
(4)outDir
- 定义:编译后文件的所在目录。
- 可选值:CommonJS、UMD、AMD、SESES、None.....
- 示例:
"compilerOptions": { "module": "CommonJS" }
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码。
- 列表中的文件都会被TS编译器所编译。