使用babel7構建完美的純ts開發環境
更新
[2019-5-9]
Added
- Initial release
0、前言
由於最近在重寫個人的原生ts外掛專案, 遇到了整合jest單測的需求, 單純地使用ts-jest
+ts-loader
會出現難以估計的錯誤, 所以決定使用babel
, 完美摒棄了傳統的ts-loader
方案, 對於主要流程記錄下.
同時也歡迎ts
新手和想提升的你, 參與到專案中來, 詳情可閱讀Wiki
一、基本配置
PS
: 先通過簡單的配置, 讓webpack
正常解析ts
, 並且於測試環境中正常執行.
1.1 第一步: 解除安裝依賴
題目已經說的很清楚了,babel7
的出現, 使得webpack
對於ts
檔案的處理, 不再依賴於ts-loader
等外掛, 所以, 第一步就是和ts-loader
港拜拜.
npm uninstall --save-dev ts-loader
1.2 第二步: 安裝依賴
PS : 對於依賴項的取捨, 暫時還未摸清,凡事先用明白, 再去探究其原理or優化.
暫時只用到了以下幾種外掛:
npm install --save-dev babel-loader @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
1.3 第三步: babel配置
.babelrc
的基本配置:
{ "presets": [ "@babel/preset-env", "@babel/preset-typescript", ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread" ], }
1.4 第四步: webpack配置
webpack.config.ts
基本配置:
module: { rules: [ { test: /\.(ts|js)?$/, use: 'babel-loader', exclude: /node_modules/, }, ], }
1.5 第五步: 基本測試
啟動測試伺服器, 已可正常解析.
1.6 第六步: 問題挖掘
上述步驟看似完美, 但是有一個致命的問題:
對於ts的型別診斷error, webpack並不會丟擲異常.
而我們使用ts的目的不就是為了:
- 程式碼提示跳轉
- 型別檢測
所以, 這個問題還是值得解決的, 放到下一區塊記錄:
二、附加配置
接著上一小節說的, babel只負責ts的解析轉換, 並不會做對應的型別檢查, 所以需要自行構建.
2.1 第一步: tsconfig.json配置
在原tsconfig.json
中新增下列配置項:
{ "compilerOptions": { +"allowJs": true, +"target": "esnext", +"noEmit": true } }
2.2 第二步: package.json配置
原package.json
的scripts
欄位中新增:
"scripts": { +"check": "tsc -w" },
三、測試
1. 開啟ts型別檢查
npm run check
2. 啟動開發伺服器
npm run dev
四、Q&A
Q
: 上述步驟需要開啟至少兩個終端, 一個用於型別檢查
, 另一個用於開發伺服器
, 是否有更優的解決方案?
A : 可參考下一條問題
Q : 在檢測到ts型別錯誤時, webpack的構建並不會丟擲異常?
A: 剛好遇到了這個問題, 參考該issue , 找到fork-ts-checker-webpack-plugin 外掛, 引入即可.
Q : 在ts檔案發生變動時,fork-ts-checker-webpack-plugin 無法即時反應型別檢查的情況(只觸發一次)?
A : 已知的issue
五、有疑惑?
如果構建的過程有任何疑惑, 可以加我的扣:1766083035