使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader

前言

以前写过一篇旧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，这使得它的编译速度飞快。

并且重要的是你写的TypeScript不会再进行类型检测，而在你改动代码后中断运行的页面。

因此，检测呢？

我写个TypeScript就是用来搞类型检测替代PropTypes的啊，你这样安装了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+用户，能够运行考虑运行下面的两条命令升级：

npm install babel-upgrade -g

babel-upgrade --write

而后咱们安装：

npm i --save @babel/preset-typescript

而后将以前在webpack中配置解析tsx的部分去掉，改成：

module: {
  rules: [
    //...
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-typescript'
        ]
      }
    }
    //...
  ]
}

Ant Design的按需加载

必需要把这个东西单独拎出来讲，太坑了。

以前的方案我们使用的是ts-import-plugin来处理的。

因此下意思我以为这个地方会很麻烦，网上搜各类方案。

然而必然是没有答案的。

实际上我们只须要升级一下babel-plugin-import到最新就能够了。

我以前就是由于babel-plugin-import版本过低，致使只对js文件有效，对ts文件无效。

而后配置一下babel-plugin-import便可：

module: {
  rules: [
    //...
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react',
          '@babel/preset-typescript'
        ],
        plugins: [
          ['import', { libraryName: 'antd', style: 'css' }], // `style: true` 会加载 less 文件
        ],
      }
    }
    //...
  ]
}

总结

此次升级花的最多时间就在ant-design的按需加载上，其它的东西其实都很好配置，无非是知识点零散些罢了。

说实话很感谢那篇译文，可是读起来仍是以为有点生硬。

因此另一个花时间的点，就是如何有条理地把为何升级阐述清楚。

这里再附上参考项目：脚手架项目。