文件选项

在项目根目录下新建 tsconfig.json

{}

假如是空对象，在控制台执行命令 tsc，就会编译src目录下的所有ts文件，包含子目录的ts文件

如果我想只编译src下的index.ts文件呢？如下配置files 数组，当然可以写多个文件

{
  files: [ 'src/index.ts']
}

如果我想编译src目录下所有的.ts文件，而且不包含子目录的文件呢？如下配置include,可以设置通配符，如src下的lib目录的所有ts文件用 src/lib/*

{
  include: ['src/lib/*']
}

如果我想编译所有的二级目录下的ts呢？利用通配符: /*/*

{
  include: ['src/*/*']
}

有inclue, 自然就有exclude 排除不想要编译的目录，exclude 会默认排除node_modules目录，用法类似include,这里就不举例了。

配置也可以继承，把配置分开到多个文件，比如tsconfig.a.json, tsconfig.b.json, 利用extends合并到tsconfig.json里面

{
  extends: ['./tsconfig.a.json', './tsconfig.b.json']
}

编译选项

compilerOptions 选项有很多配置，学了这些基本日常开发没有什么问题了

{
  "include": ["src/*"], // 只编译src目录下的ts文件
  "compilerOptions": {
    "incremental": true, // 打开增量编译，当你修改一个文件的时候，会增量编译而不是重新编译，从而提高编译速度
  }
}

incremental: true 打开增量编译,当你修改一个文件的时候，会增量编译而不是重新编译，从而提高编译速度

{
  "include": ["src/*"], // 只编译src目录下的ts文件
  "compilerOptions": {
    "incremental": true, // 打开增量编译，当你修改一个文件的时候，会增量编译而不是重新编译，从而提高编译速度
    "tsBuildInfoFile": "./buildFile",   //  输出存储编译信息的文件，可以看编译前后的信息
  }
}

"tsBuildInfoFile": "./buildFile", 输出存储编译信息的文件，可以看编译前后的信息，如下图 123步骤，buildFile文件可以随便删除

image.png

工程引用

有时候我们一个大项目里面可能分为几个小项目，他们之间虽然逻辑独立，但是又会存在引用的关系，为了方便独立开发、打包、发布，这时候就需要配置工程引用了 references: []

如项目src下面有 client server test 三个目录

--src
   +client
   +server
   +test

我们可以为每个子项目配置一个tsconfig.json, 然后在src目录配置一个tsconfig.json

--src
   --client
      tsconfig.json
   --server
      tsconfig.json
   --test
      tsconfig.json
 tsconfig.json

// client/tsconfig.json
extends: ["../../ tsconfig.json"], // 继承根目录的配置
compilerOptions: {
  output: "../../dist/client"
}

// server/tsconfig.json
extends: ["../../ tsconfig.json"], // 继承根目录的配置
compilerOptions: {
  output: "../../dist/server"
}

// test/tsconfig.json
extends: ["../../ tsconfig.json"], // 继承根目录的配置
compilerOptions: {
  output: "../../dist/test"
}
refferences: [ 
  {"path": "../client/"}, 
  {"path": "../server/"}
]  // 引用 client , server

// /src/tsconfig.json
"compilerOptions": {
    "target": "es5",                          
    "module": "commonjs", 
    "strict": true,
    "composite": true,   // 工程可以被引用、增量编译
}

如何编译？

子项目如client直接运行 tsc -b src/client
运行 tsc -b src 来一次性构建所有工程
清除构建 tsc -b src --clean

构建优化

在开发过程中，随着项目越来越大，每次修改代码重新运行都会花费大量的时间，这其实是ts-loader每次都要重新把ts转换成js，同时在这个过程中还要做类型检查，那么我们是否可以只做转换，不做检查？答案是可以的。

在webpack配置的ts-loader中把transpileOnly设置为true，代表只做转换，不会进行类型检查，把类型检查抽离出来放到另外一个进程中执行，这样子运行时的构建速度就会大大提升，需要安装fork-ts-checker-webpack-plugin 这个插件来配合

npm install --save-dev fork-ts-checker-webpack-plugin

 module: {
        rules: [
            {
                test: /\.tsx?$/i,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true, // 只构建，不做类型检查， 类型检查需要配置额外的plugin fork-ts-checker-webpack-plugin
                        }
                    }
                ],
                exclude: /node-modules/
            }
        ],

        plugins: [
          ...
          new ForkTsCheckerWebpackPlugin() // 类型检查
        ]
    },