前言
之前寫過一篇舊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檢測，所以這一步咱們可以略過，
一些缺陷
上方譯文中提到了此方案的以下四個缺陷：
- Namespace語法不推薦，改用標準的 ES6 module（import/export），
- 不支持
x 語法轉換型別，改用x as newtype， - const 列舉
- 歷史遺留風格的 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來處理的，
所以下意識我覺得這個地方會很麻煩，網上搜各種方案，
然而必然是沒有答案的，要么就是ts-import-plugin，要么就是和create-react-app結合在一起的那種，
實際上咱們只需要升級一下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的按需加載上，其它的東西其實都很好配置，無非是知識點零散些罷了，
說實話很感謝那篇譯文，但是讀起來還是覺得有點生硬，
所以另外一個花時間的點，就是如何有條理地把為什么升級闡述清楚，
這里再附上參考專案：腳手架專案，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/162076.html
標籤：JavaScript
上一篇：遞回
下一篇：js中的變數