国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用babel7構(gòu)建完美的純ts開發(fā)環(huán)境

Freeman / 2950人閱讀

摘要：更新前言由于最近在重寫個(gè)人的原生插件項(xiàng)目遇到了集成單測(cè)的需求單純地使用會(huì)出現(xiàn)難以估計(jì)的錯(cuò)誤所以決定使用完美摒棄了傳統(tǒng)的方案對(duì)于主要流程記錄下項(xiàng)目地址同時(shí)也歡迎新手和想提升的你參與到項(xiàng)目中來詳情可閱讀一基本配置先通過簡(jiǎn)單的配置讓

更新 [2019-5-9] Added

Initial release

0、前言

由于最近在重寫個(gè)人的原生ts插件項(xiàng)目, 遇到了集成jest單測(cè)的需求, 單純地使用ts-jest + ts-loader會(huì)出現(xiàn)難以估計(jì)的錯(cuò)誤, 所以決定使用babel, 完美摒棄了傳統(tǒng)的ts-loader方案, 對(duì)于主要流程記錄下.

項(xiàng)目地址: ts-utility-plugins
同時(shí)也歡迎ts新手和想提升的你, 參與到項(xiàng)目中來, 詳情可閱讀Wiki
一、基本配置 
PS: 先通過簡(jiǎn)單的配置, 讓webpack正常解析ts, 并且于測(cè)試環(huán)境中正常執(zhí)行.
1.1 第一步: 卸載依賴

題目已經(jīng)說的很清楚了, babel7的出現(xiàn), 使得webpack對(duì)于ts文件的處理, 不再依賴于ts-loader等插件, 所以, 第一步就是和ts-loader港拜拜.

npm uninstall --save-dev ts-loader
1.2 第二步: 安裝依賴 
PS: 對(duì)于依賴項(xiàng)的取舍, 暫時(shí)還未摸清, 凡事先用明白, 再去探究其原理or優(yōu)化.

暫時(shí)只用到了以下幾種插件:

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 第五步: 基本測(cè)試

啟動(dòng)測(cè)試服務(wù)器, 已可正常解析.

1.6 第六步: 問題挖掘

上述步驟看似完美, 但是有一個(gè)致命的問題:

對(duì)于ts的類型診斷error, webpack并不會(huì)拋出異常.

而我們使用ts的目的不就是為了:

代碼提示跳轉(zhuǎn)

類型檢測(cè)

所以, 這個(gè)問題還是值得解決的, 放到下一區(qū)塊記錄:

二、附加配置

接著上一小節(jié)說的, babel只負(fù)責(zé)ts的解析轉(zhuǎn)換, 并不會(huì)做對(duì)應(yīng)的類型檢查, 所以需要自行構(gòu)建.

2.1 第一步: tsconfig.json配置

在原tsconfig.json中新增下列配置項(xiàng):

{
  "compilerOptions": {
+    "allowJs": true,
+    "target": "esnext",
+    "noEmit": true
  }
}
2.2 第二步: package.json配置

原package.json的scripts字段中新增:

  "scripts": {
+    "check": "tsc -w"
  },
三、測(cè)試

1. 開啟ts類型檢查

npm run check

2. 啟動(dòng)開發(fā)服務(wù)器

npm run dev
四、Q&A 
Q: 上述步驟需要開啟至少兩個(gè)終端, 一個(gè)用于類型檢查, 另一個(gè)用于開發(fā)服務(wù)器, 是否有更優(yōu)的解決方案?

A: 可參考下一條問題

Q: 在檢測(cè)到ts類型錯(cuò)誤時(shí), webpack的構(gòu)建并不會(huì)拋出異常?

A: 剛好遇到了這個(gè)問題, 參考該issue, 找到fork-ts-checker-webpack-plugin插件, 引入即可.

Q: 在ts文件發(fā)生變動(dòng)時(shí), fork-ts-checker-webpack-plugin無法即時(shí)反應(yīng)類型檢查的情況(只觸發(fā)一次)?

A: 已知的issue

五、拓展閱讀
Q A
webpack構(gòu)建ts開發(fā)環(huán)境匯總篇 點(diǎn)這里
使用ts編寫webpack.config.js? 點(diǎn)這里
我想通過script標(biāo)簽引入插件? 點(diǎn)這里
ts-loader完美替代方案 點(diǎn)這里
集成jest單測(cè)? 點(diǎn)這里
六、有疑惑?

如果構(gòu)建的過程有任何疑惑, 可以加我的扣: 1766083035

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/110210.html

相關(guān)文章

  • 使用 TypeScript 改造構(gòu)建工具及測(cè)試用例

    摘要：第一個(gè)完全使用重構(gòu)的純項(xiàng)目已經(jīng)上線并穩(wěn)定運(yùn)行了。測(cè)試用例的改造前邊的改為大多數(shù)原因是因?yàn)閺?qiáng)迫癥所致。但是測(cè)試用例的改造則是一個(gè)能極大提高效率的操作。 最近的一段時(shí)間一直在搞TypeScript，一個(gè)巨硬出品、賦予JavaScript語言靜態(tài)類型和編譯的語言。 第一個(gè)完全使用TypeScript重構(gòu)的純Node.js項(xiàng)目已經(jīng)上線并穩(wěn)定運(yùn)行了。 第二個(gè)前后端的項(xiàng)目目前也在重構(gòu)中，關(guān)于前...

    Cristic 評(píng)論0 收藏0

  • babel7 重新理解

    摘要：主要功能點(diǎn)語法轉(zhuǎn)換墊片兼容處理，通過方式在目標(biāo)環(huán)境中添加缺失的特性源碼轉(zhuǎn)換其他使用理念主要通過插件的形式達(dá)到轉(zhuǎn)換代碼的目的。就是解決這個(gè)問題的。 測(cè)試環(huán)境 node 10.14.1Babel 7.4.3 Babel 是什么？ Babel 是一個(gè)工具鏈，主要用于將 ECMAScript2015+版本的代碼轉(zhuǎn)換為向后兼容的 Javascript 代碼，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其...

    avwu 評(píng)論0 收藏0

  • 基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡(jiǎn)化前端開發(fā)環(huán)境配置，開箱即用，

    摘要：開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請(qǐng)點(diǎn)個(gè)及時(shí)關(guān)注項(xiàng)目更新請(qǐng)點(diǎn)個(gè)項(xiàng)目請(qǐng)?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗(yàn)支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動(dòng)加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...

    junfeng777 評(píng)論0 收藏0

  • 如何搭建一個(gè)基于react、webpack4、babel7的項(xiàng)目（一）

    摘要：對(duì)的工作流程有點(diǎn)模糊，以及據(jù)官方文檔稱的升級(jí)，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個(gè)適合團(tuán)隊(duì)的腳手架。保證各文件獲得一致的文件編碼和縮進(jìn)效果。這些在后面文章中，都會(huì)一個(gè)個(gè)涉及到，此處不做詳細(xì)展開。 前言 寫前端項(xiàng)目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對(duì)團(tuán)隊(duì)做一些定制化的修改。對(duì) webpack 的工作流程有點(diǎn)模...

    IamDLY 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Freeman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<