資訊專欄INFORMATION COLUMN
摘要：更新前言由于最近在重寫個人的原生插件項目遇到了集成單測的需求單純地使用會出現難以估計的錯誤所以決定使用完美摒棄了傳統的方案對于主要流程記錄下項目地址同時也歡迎新手和想提升的你參與到項目中來詳情可閱讀一基本配置先通過簡單的配置讓
更新 [2019-5-9] Added
Initial release
0、前言由于最近在重寫個人的原生ts插件項目, 遇到了集成jest單測的需求, 單純地使用ts-jest + ts-loader會出現難以估計的錯誤, 所以決定使用babel, 完美摒棄了傳統的ts-loader方案, 對于主要流程記錄下.
項目地址: ts-utility-plugins一、基本配置同時也歡迎ts新手和想提升的你, 參與到項目中來, 詳情可閱讀Wiki
PS: 先通過簡單的配置, 讓webpack正常解析ts, 并且于測試環境中正常執行.1.1 第一步: 卸載依賴
題目已經說的很清楚了, babel7的出現, 使得webpack對于ts文件的處理, 不再依賴于ts-loader等插件, 所以, 第一步就是和ts-loader港拜拜.
npm uninstall --save-dev ts-loader1.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-spread1.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
五、拓展閱讀| Q | A |
|---|---|
| webpack構建ts開發環境匯總篇 | 點這里 |
| 使用ts編寫webpack.config.js? | 點這里 |
| 我想通過script標簽引入插件? | 點這里 |
| ts-loader完美替代方案 | 點這里 |
| 集成jest單測? | 點這里 |
如果構建的過程有任何疑惑, 可以加我的扣: 1766083035
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110210.html
摘要：第一個完全使用重構的純項目已經上線并穩定運行了。測試用例的改造前邊的改為大多數原因是因為強迫癥所致。但是測試用例的改造則是一個能極大提高效率的操作。 最近的一段時間一直在搞TypeScript，一個巨硬出品、賦予JavaScript語言靜態類型和編譯的語言。 第一個完全使用TypeScript重構的純Node.js項目已經上線并穩定運行了。 第二個前后端的項目目前也在重構中，關于前...
摘要：主要功能點語法轉換墊片兼容處理，通過方式在目標環境中添加缺失的特性源碼轉換其他使用理念主要通過插件的形式達到轉換代碼的目的。就是解決這個問題的。 測試環境 node 10.14.1Babel 7.4.3 Babel 是什么？ Babel 是一個工具鏈，主要用于將 ECMAScript2015+版本的代碼轉換為向后兼容的 Javascript 代碼，以便能夠運行在當前和舊版本的瀏覽器或其...
摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...
摘要：對的工作流程有點模糊，以及據官方文檔稱的升級，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進效果。這些在后面文章中，都會一個個涉及到，此處不做詳細展開。 前言 寫前端項目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模...
閱讀 3410·2023-04-26 02:41
閱讀 2461·2023-04-26 00:14
閱讀 2871·2021-08-11 10:22
閱讀 1288·2019-12-27 11:38
閱讀 3579·2019-08-29 18:34
閱讀 2386·2019-08-29 12:13
閱讀 2958·2019-08-26 18:26
閱讀 1859·2019-08-26 16:49
