—-> 原文地址

只管理一个编译器更轻松

TypeScirpt 需要它自己的编译器——因为它提供了超棒的类型检查功能。

在灰暗的日子里（Babel 7之前）

将两个独立的编译器（TypeScript 和 Babel）串联在一起是可不是一件容易的工作。编译流程变成：TS > TS 编译器 > JS > Babel > JS (再次)。

Webpack 经常用于解决这个问题，调整 Webpack 的配置。将 *.ts 提供给 TypeScript，然后将运行的结果提供给 Babel。但是用哪个 TypeScript loader 呢？2个非常流行的选择是：ts-loader 和 awesome-typescript-loader。awesome-typescript-loader的README.md中提到，在某些工作量中它可能会比较慢，并且建议使用 ts-loader 配合 HappyPack 或者 thread-loader。ts-loader 的README.md文件推荐结合使用 fork-ts-checker-webpack-plugin、HappyPack、thread-loader 以及（或者）cache-loader。

—-> 原文链接2

使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader
2019-12-18 01:4427842

前言

之前写过一篇旧React项目安装并使用TypeScript的文章：在React旧项目中安装并使用TypeScript的实践。
博客里使用awesome-typescript-loader对Typescript代码进行检测和转换。
而这几天又修改了一下自己的脚手架，使用@babel/preset-typescript来处理Typescript。

回顾awesome-typescript-loader方案

谈@babel/preset-typescript的优越性之前，还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。
首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器，而Babel同样是一个将新版本JS新语法转换为低版本JS代码的编译器。
所以我们之前的方案每次修改了一点代码，都会将TS代码传递给TypeScript转换为JS，然后再将这份JS代码传递给Babel转换为低版本JS代码。
因此我们需要配置两个编译器，并且每次做了一点更改，都会经过两次编译。

@babel/preset-typescript方案

介绍这个方案之前，我需要列出我参考的一篇译文：[译] TypeScript 和 Babel：一场美丽的婚姻。
这里提到这是 TypeScript 和 Babel 团队长达一年的官方合作成果，所以至少我们不用担心这是个野生方案会烂尾。
核心提炼一下：@babel/preset-typescript和@babel/preset-react类似，是将特殊的语法转换为JS。
但是有点区别的是，@babel/preset-typescript是直接移除TypeScript，转为JS，这使得它的编译速度飞快。
并且只需要管理Babel一个编译器就行了，因为我将脚手架中的typescript库卸载后，依然可以完美运行。
而且重要的是你写的TypeScript不会再进行类型检测，使得你改动代码后中断运行的页面。

所以，检测呢？

我写TypeScript就是用来搞类型检测的啊，你安装了TypeScript，写了TS代码然后再用@babel/preset-typescript移除不是多此一举吗？
不，并不是多此一举。
还记得前面那篇译文吗？
它的方案是使用ESLint，用@typescript-eslint配置ESLint来达到检测的目的。
而我们的方案呢？
我们是高贵的VSCode玩家，咱们自带TS检测，所以这一步咱们可以略过。

一些缺陷

上方译文中提到了此方案的以下四个缺陷：

  1. Namespace语法不推荐，改用标准的 ES6 module（import/export）。
  2. 不支持x 语法转换类型，改用x as newtype。
  3. const 枚举
  4. 历史遗留风格的 import/export 语法。比如：import foo = require(…) 和 export = foo。

第1条和第4条不用，而且已经过时了。
第2条缺陷改一下语法就好了，这个语法会直接提示语法报错，很好改，问题不大。
第3条缺陷已经没有了，亲测可用。

替换步骤

要使用@babel/preset-typescript，务必确保你是Babel7+。
如果不是Babel7+用户，可以考虑运行下面的两条命令升级：

  1. npm install babel-upgrade -g
  2. babel-upgrade --write

然后我们安装：

  1. npm i --save @babel/preset-typescript

然后将之前在webpack中配置解析tsx的部分去掉，改为：

  1. module: {
  2.   rules: [
  3.     //...
  4.     {
  5.       test: /\.tsx?$/,
  6.       exclude: /node_modules/,
  7.       loader: 'babel-loader',
  8.       options: {
  9.         presets: [
  10.           '@babel/preset-env',
  11.           '@babel/preset-react',
  12.           '@babel/preset-typescript'
  13.         ]
  14.       }
  15.     }
  16.     //...
  17.   ]
  18. }

Ant Design的按需加载

必须要把这个东西单独拎出来说，太坑了。
之前的方案咱们使用的是ts-import-plugin来处理的。
所以下意识我觉得这个地方会很麻烦，网上搜各种方案。
然而必然是没有答案的，要么就是ts-import-plugin，要么就是和create-react-app结合在一起的那种。
实际上咱们只需要升级一下babel-plugin-import到最新就可以了。
我之前就是因为babel-plugin-import版本太低，导致只对js文件有效，对ts文件无效。
然后配置一下babel-plugin-import即可：

  1. module: {
  2.   rules: [
  3.     //...
  4.     {
  5.       test: /\.tsx?$/,
  6.       exclude: /node_modules/,
  7.       loader: 'babel-loader',
  8.       options: {
  9.         presets: [
  10.           '@babel/preset-env',
  11.           '@babel/preset-react',
  12.           '@babel/preset-typescript'
  13.         ],
  14.         plugins: [
  15.           ['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
  16.         ],
  17.       }
  18.     }
  19.     //...
  20.   ]
  21. }