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

更新

[2019-5-9]

Added

• Initial release

0、前言

因爲最近在重寫我的的原生ts插件項目, 遇到了集成jest單測的需求, 單純地使用ts-jest + ts-loader會出現難以估計的錯誤, 因此決定使用babel, 完美摒棄了傳統的ts-loader方案, 對於主要流程記錄下.

項目地址: ts-utility-plugins

同時也歡迎ts新手和想提高的你, 參與到項目中來, 詳情可閱讀Wiki

1、基本配置

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的目的不就是爲了:

• 代碼提示跳轉
• 類型檢測

因此, 這個問題仍是值得解決的, 放到下一區塊記錄:

2、附加配置

接着上一小節說的, 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"
  },

3、測試

1. 開啓ts類型檢查

npm run check

2. 啓動開發服務器

npm run dev

4、Q&A

Q: 上述步驟須要開啓至少兩個終端, 一個用於 類型檢查, 另外一個用於 開發服務器, 是否有更優的解決方案?

A: 可參考下一條問題

Q: 在檢測到ts類型錯誤時, webpack的構建並不會拋出異常?

A: 恰好遇到了這個問題, 參考該issue, 找到fork-ts-checker-webpack-plugin插件, 引入便可.

Q: 在ts文件發生變更時, fork-ts-checker-webpack-plugin沒法即時反應類型檢查的狀況(只觸發一次)?

A: 已知的issue

5、拓展閱讀

Q	A
webpack構建ts開發環境彙總篇	點這裏
使用ts編寫webpack.config.js?	點這裏
我想經過script標籤引入插件?	點這裏
ts-loader完美替代方案	點這裏
集成jest單測?	點這裏

6、有疑惑?

若是構建的過程有任何疑惑, 能夠加個人扣: 1766083035