1. ts-loader

这是用于 webpack 的 TypeScript 加载器，将 TypeScript 编译成 JavaScript。

ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。

1.1 安装

yarn add ts-loader --dev
或者
npm install ts-loader --save-dev

如果还没有安装 TypeScript，你需要先安装一下：

yarn add typescript --dev

1.2 开始

正常使用 webpack 即可。

Options 有两种类型的 Options：TypeScript options（也称为 “编译器 options” ）和 loader options。TypeScript options 应该通过 tsconfig.json 文件设置。loader options 可以通过 webpack 配置中的 options 属性指定：transpileOnly 快速构建一个项目。

transpileOnly: false
语言转换 + 类型检查 = 3290 ms

transpileOnly: true
only 语言转换 = 598 ms

transpileOnly: true + fork-ts-checker-webpack-plugin
transpileOnly: true 配合插件 fork-ts-checker-webpack-plugin，可以补全类型检查的功能。

npm i fork-ts-checker-webpack-plugin -D

这时，你的项目中有类型错误，编译就会报错。

编译通过耗时：2289 ms。

2. awesome-typescript-loader

awesome-typescript-loader 的创建主要是为了加快项目中的编译速度。

安装

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

transpileOnly: false

webpack 5.27.2 compiled successfully in 3392 ms

transpileOnly: true

webpack 5.27.2 compiled successfully in 2411 ms\

transpileOnly: true + 自带插件 CheckerPlugin

const { CheckerPlugin } = require('awesome-typescript-loader');

module.exports = {
    ...
    module: {
        plugins: [
            ...
            new CheckerPlugin()
        ]
    }
}

webpack 5.27.2 compiled successfully in 2529 ms

ts-loader 与 awesome-typescript-loader 编译时间对比

loader	默认配置	transpileOnly	transpileObly + 类型检查进程
ts-loader	3200+	600	3000+（时间较长）
awesome-typescript-loader	3300+	2400+	2500+（类型检查有疏漏）

awesome-typescript-loader 与 ts-loader 主要区别

1）更适合与Babel集成，使用Babel的转义和缓存；

2）不需要安装额外的插件就可以把类型检查放在独立进程中进行。

3. Babel

为什么有了 Typescript，还需要 Babel？看一下对比：

Babel 7 之前，是不支持 TS 的

编译流程是这样的：TS > TS 编译器 > JS > Babel > JS (再次)
Babel 7

实现了“只有一个 Javascript 编译器” 的梦想！通过允许 Babel 作为唯一的编译器来工作，就再也没必要利用一些复杂的 Webpack 魔法来管理、配置或者合并两个编译器。

3.1 Babel 是如何处理 TypeScript 的？

它移除了 TypeScript。

是的，它将 TypeScript 全部转换为常规 JavaScript，然后再一如既往的操作。

因为 Babel 的优秀的缓存和单文件散发架构，Babel + TypeScript 的组合套餐会提供了更快的编译。这是 Babel 在编译过程中剥离 TypeScript 的第一个优势。

而类型检查呢？那只在当你准备好的时候进行。这是 Babel 在编译过程中剥离 TypeScript 的第二个优势。

创建一个 babel 工程

结合`TypeScript`

此时，只具备编译功能，再安装 Typescript 补全类型检查功能。

配置一下脚本

我们需要新开一个 terminal，跑npm run check-type。

4. 如何选择 TypeScript 编译工具

如果没有使用 Babel，首选 TypeScript 自带编译器（配合 ts-loader 使用）；
如果项目中有 Babel，安装 @babel/preset-typescript，配合 tsc 做类型检查；
两种编译器不要混用。

————————————————

编译工具：从ts-loader到babel