使用babel7構建完美的純ts開發環境

摘要： 更新 [2019-5-9] Added Initial release 0、前言 由於最近在重寫個人的原生ts外掛專案, 遇到了整合jest單測的需求, 單純地使用ts-jest +ts-loader 會出現難以估計的錯誤, 所以決定使用 ...

更新

[2019-5-9]

Added

• Initial release

0、前言

由於最近在重寫個人的原生ts外掛專案, 遇到了整合jest單測的需求, 單純地使用ts-jest +ts-loader 會出現難以估計的錯誤, 所以決定使用babel , 完美摒棄了傳統的ts-loader 方案, 對於主要流程記錄下.

一、基本配置

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