十四、编译工具：从ts-loader到Bable

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        use: [{
          loader: 'ts-loader',
          options: {
            // 配置项开启，编译器只做语言转换，而不做类型检查
            transpileOnly: true
          }
        }],
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/tpl/index.html'
    }),
    new ForkTsCheckerWebpackPlugin()
  ]
}

transpileOnly: 关闭，即做语言转换，又做类型检查，影响项目构建速度；开启，只做语言转换，不做类型检查，可以加快项目构建速度，但是即使ide报类型错误，也可以构建项目，当开启时可以搭配插件fork-ts-checker-webpack-plugin来进行构建项目的类型检查

awesome-typescript-loader

与ts-loader的主要区别：

• 更适合与Babel集成，使用Babel的转义和缓存
• 不需要安装额外的插件，就可以把类型检查放在独立进程中进行
  编译时间对比（ms）:
  

Babel暂不支持以下四种语法：

// babel 不能使用下面四种语法
<!--命名空间-->
// namespace N {
//     export const n = 1
// }
<!--类型断言-->
// let s = {} as A
// s.a = 1
<!--枚举常量-->
// const enum E { A }
<!--导出-->
// export = s

如何选择TypeScript编译工具