使用typescript開(kāi)發(fā)字節(jié)輕服務(wù)(云工程)

官網(wǎng)寫(xiě)得很簡(jiǎn)單。
按照官網(wǎng)的思路確實(shí)可以使用ts開(kāi)發(fā),但是缺少路徑別名處理,監(jiān)聽(tīng)ts文件更改等功能。

1. 增加typescript支持

1.1 把源文件都改成ts,當(dāng)然前提要安裝typescript依賴(lài)以及配置tsconfig.json

目錄結(jié)構(gòu)

1.2 使用tsc編譯所有ts文件

這里我配置的是編譯到dist目錄:

編譯后的文件

編譯完成后在根目錄的index.js中修改一下,因?yàn)橐郧笆菃?dòng)的src/app.js,現(xiàn)在編譯完成后當(dāng)然位置就不一樣了:

// 把這里的地址改成編譯后的app.js的地址
const app = require('./dist/app')
module.exports = app.callback()

如果你把所有的requiremodule.exports改成了importexports,啟動(dòng)項(xiàng)目的時(shí)候報(bào)錯(cuò),那么index.js中導(dǎo)入方式可能要改一下

module.exports = app.default.callback()

2. 路徑別名處理

為了方便經(jīng)常設(shè)置路徑別名,ts中的別名和webpack中的別名是一個(gè)意思,但是有個(gè)問(wèn)題就是編譯的時(shí)候確沒(méi)有替換掉別名。

// tsconfig.json
    "paths": {
      "@/*": ["src/*"]
    }

2.1 使用tsconfig-paths(不得行)

以前我的項(xiàng)目就是用的這個(gè),但是這里不能用,主要是因?yàn)檫@個(gè)插件是運(yùn)行時(shí)插件,也就相當(dāng)于中間件,當(dāng)你使用node或者ts-node啟動(dòng)項(xiàng)目的時(shí)候可以用它。
而目前云工程部署并不支持額外的node參數(shù),如果能有和pm2一樣的這個(gè)命令就好了

pm2 start bootstrap.js --node-args="-r tsconfig-paths/register"
如果參考pm2就可以這樣
inspirecloud dev --node-args="-r tsconfig-paths/register"
控制臺(tái)增加一個(gè)添加node參數(shù)的地方,再把這參數(shù)加上就完美了 

2.2 使用tscpaths

安裝完成后把打包命令改成
tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist
就行了

3. 添加監(jiān)控

開(kāi)發(fā)階段肯定不能改一下去build一下,最好有自動(dòng)化,官方項(xiàng)目上面有個(gè)inspirecloud.json文件

{
  "main": "index.js",
  "watch": [
    "**/*.js"
  ]
}

這里面有watch的選項(xiàng),但是沒(méi)有更多可控的選項(xiàng),所以我使用了gulp來(lái)輔助監(jiān)聽(tīng)

3.1 添加gulp

gulp安裝完成,編寫(xiě)gulpfile.js,這里我用到了gulp-shell插件:

const gulp = require('gulp')
const shell = require('gulp-shell')
// 原理很簡(jiǎn)單就是監(jiān)聽(tīng)`src`下的文件,一有改變就執(zhí)行`build`
const watch =  async () => {
  gulp.watch('src/**/*', {ignoreInitial: false}, shell.task('tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist'))
}
module.exports = {
  watch,
}

我本來(lái)想把buildinspirecloud dev和在一起,但是好像沒(méi)辦法同時(shí)執(zhí)行兩個(gè)監(jiān)聽(tīng)任務(wù)。

4 結(jié)果

最后的效果就是要開(kāi)兩個(gè)任務(wù)。

左邊使用`gulp watch`,右邊使用`inspirecloud dev`

這樣當(dāng)src里面的文件變化的時(shí)候就會(huì)觸發(fā)構(gòu)建,然后inspirecloud dev監(jiān)聽(tīng)了所有js文件,發(fā)現(xiàn)有新的js文件就會(huì)觸發(fā)重啟服務(wù)。

由于我用過(guò)的工具不是很多,所以只能想到這種方法,如果有更好的方法歡迎討論!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容