ts-loader vs awesome-typescript-loader

ts-loader 和 awesome-typescript-loader 都是适用于 webpack 的 typescript loader，可以用于

Google 提供的对比信息

从上图我们可以看出来两者的 stars 很接近，ts-loader 在最近有过更新，而 awesome-typescript-loader 则是在去年底更新过。

ts-loader 和 awesome-typescript-loader 简介

二者都是作为 webpack 的 loader 存在，用于支持 webpack 来编译 ts 文件。

ts-loader 用法

1、安装 ts-loader

yarn add ts-loader --dev

或者

npm install ts-loader --save-dev

2、 配置 webpack.config.js

// webpack.config.js
module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.ts",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    // 添加 .ts 和 .tsx 作为可以解析的文件名
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // 所有带有`.ts`或`.tsx`扩展名的文件都将由`ts-loader`处理
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

awesome-typescript-loader 用法

1、安装 awesome-typescript-loader

npm install awesome-typescript-loader --save-dev

2、 配置 webpack.config.js

module.exports = {
  resolve: {
    // 添加 .ts 和 .tsx 作为可以解析的文件名
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  module: {
    rules: [
      {
        // 所有带有`.ts`或`.tsx`扩展名的文件都将由`awesome-typescript-loader`处理
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      }
    ]
  }
};

更多具体的用法大家可以参考官方文档：
ts-loader 、awesome-typescript-loader。

ts-loader 和 awesome-typescript-loader 对比

在作者的介绍中，作者对二者主要的不同做出了分析：
awesome-typescript-loader 能够加速项目中一些非常大的文件编译速度，同时可以完全控制项目文件编译方式。主要有两个要点：

• atl 与 Babel 有一流的集成，可以实现缓存。这对于使用带有 Babel 的 Typescript 的人来说非常有用。当启用 useBabel 和 useCache 标志时，typescript 的 emit 将使用 Babel 进行转换并缓存。所以下次如果源文件(+environment) 具有相同的 checksum ，可以完全跳过 typescript 和 babel 的转换。这大大减少了此方案中的构建时间。
• atl 能够将类型检查器和发射器分叉到一个单独的进程，这也加快了一些开发方案（例如与 react-hot-loader 的反应）所以 webpack 编译将提前结束，可以在浏览器中探索编译版本你的文件是 typechecked。