使用@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的按需加載上，其它的東西其實都很好配置，無非是知識點零散些罷了。

說實話很感謝那篇譯文，可是讀起來仍是以爲有點生硬。

因此另一個花時間的點，就是如何有條理地把爲何升級闡述清楚。

這裏再附上參考項目：腳手架項目。