一、编译ts文件

命令：

tsc 
// 可以自动将当前项目下的所有ts文件编译为js文件。前提是在根目录下创建一个ts的配置文件tsconfig.json。
// 或
tsc app.ts 
// 或
tsc app.ts -w   // 开启监视模式

tsconfig.json配置文件的配置选项：

• include
  • 定义希望被编译文件所在的目录
  • 默认值：["*/"]
  • 示例：

"include": ["src/**/*","tests/**/*"]
// 上述示例中，所有src目录和tests目录下的文件都会被编译

• exclude
  • 定义需要排除在外的目录
  • 默认值：["node_modules", "bower_components", "jspm.packages"]
  • 示例：

"exclude": ["./src/hello/**/*"]
// 上述示例中，src下的hello目录下的文件都不会被编译

• extends
  • 定义被继承的配置文件
  • 示例

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

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

"files": ["core.ts",''aaa.ts''] 
// 数组中的文件都会被TS编译器编译

• compilerOptions
  • 编译选项是配置文件中非常重要也比较复杂的配置项
  • 在compilerOptions中包含多个子选项，用来完成对编译的配置
    • 项目选项
      • target
        • 设置ts代码编译的目标版本
        • 可选值：ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
      • lib
        • 指定代码运行时所包含的库（宿主环境）
        • 可选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost...
      • module
        • 设置编译后代码使用的模块化系统
        • 可选值：CommonJs、UMD、AMD、System、ES2020、ESNext、None
      • outDir
        • 编译后文件的所在目录
        • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
      • outFile
        • 将代码合并为一个文件，所有的全局作用域中的代码会合并到同一个文件中。
      • allowJs
        • 是否对js文件进行编译，默认是false
      • checkJs
        • 是否检查js代码是否符合语法规范，默认是false
      • removeComments
        • 是否移除注释
      • noEmit
        • 不生成编译后的文件
      • noEmitOnError
        • 当有错误时不生成编译后的文件
      • alwaysStrict
        • 用来设置编译后的文件是否使用严格模式，默认是false
      • noImplicitAny
        • 不允许隐式的any类型

二、使用webpack打包ts

• 安装
  cnpm i -D webpack webpack-cli typescript ts-loader