出于某些原因，近期開(kāi)始需要在公司推廣使用nodejs寫(xiě)服務(wù)端，因?yàn)橹笆褂胑s6開(kāi)發(fā)過(guò)多個(gè)個(gè)人項(xiàng)目，所以知道新手開(kāi)發(fā)node非常容易將代碼寫(xiě)的散亂并且不易后人理解。本人剛?cè)胄械臅r(shí)候做的是java，覺(jué)得強(qiáng)類型的語(yǔ)言更加適合組織代碼和團(tuán)隊(duì)合作，而且強(qiáng)類型語(yǔ)言因?yàn)轭愋蛷?qiáng)制聲明，所以IDE可以做到很好的代碼感知能力，因?yàn)橛蠭DE的撐腰，所以開(kāi)發(fā)大型系統(tǒng)，復(fù)雜系統(tǒng)比較有保障。所以折中的選擇了typescript開(kāi)發(fā)，也就用起了vsc(visual studio code)。
無(wú)論什么語(yǔ)言什么項(xiàng)目，總得搭建起一個(gè)足夠高效可以讓自己開(kāi)心的寫(xiě)代碼的開(kāi)發(fā)環(huán)境（還是叫開(kāi)發(fā)流程？不知道怎么描述了，詞窮），以下是我對(duì)typescript開(kāi)發(fā)流程的最低要求:

typescript代碼在我保存文件時(shí)自動(dòng)編譯

編譯完成之后自動(dòng)重啟服務(wù)

可以直接在typescript代碼上打斷點(diǎn)調(diào)試

最終效果:

大家也看到了用的就是gulp+vsc內(nèi)置的debug工具(使用attach模式)，用到的gulp插件列表:

• gulp-nodemon

• gulp-sourcemaps

• gulp-typescript

先附上我的目錄結(jié)構(gòu)：

使用gulp任務(wù)編譯ts文件

最最基礎(chǔ)的肯定是編譯ts文件了，這里用到的就是gulp-typescript和gulp-sourcemaps（用于生成映射），詳細(xì)的使用方法和可配置項(xiàng)可以直接點(diǎn)上面的鏈接進(jìn)去看，這里我們需要根據(jù)tsconfig.json里的配置進(jìn)行編譯，tsconfig.json都差不多的，我這里貼下我的。

{"compilerOptions": {"target": "ES5","module": "commonjs","sourceMap": true,"outDir": "dist","emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false},"includes": ["src/**/*"] }

需要注意的地方就是為了調(diào)試ts代碼的時(shí)候映射到編譯后的文件上，sourceMap必須要開(kāi)啟，outDir也必須要指向正確的目錄。
然后就開(kāi)始編寫(xiě)gulp任務(wù)了，也是比較簡(jiǎn)單的，就需要注意下這些流的順序

var gulp = require('gulp'); var ts = require('gulp-typescript'); var sourcemaps = require('gulp-sourcemaps');var tsProject = ts.createProject('tsconfig.json');gulp.task('compile', function () {return tsProject.src()// 注意順序.pipe(sourcemaps.init()).pipe(tsProject()).pipe(sourcemaps.write()).pipe(gulp.dest('dist')); });

這樣我們?cè)诿钚羞\(yùn)行g(shù)ulp compile的時(shí)候，就會(huì)生成js文件了，打開(kāi)js文件，在文件最下方也會(huì)有用于sourcemap的url，如果需要生成.map文件的話需要傳遞一個(gè)相對(duì)路徑給.write方法:

var gulp = require('gulp'); var plugin1 = require('gulp-plugin1'); var plugin2 = require('gulp-plugin2'); var sourcemaps = require('gulp-sourcemaps');gulp.task('javascript', function() {gulp.src('src/**/*.js').pipe(sourcemaps.init()).pipe(plugin1()).pipe(plugin2()).pipe(sourcemaps.write('../maps')).pipe(gulp.dest('dist')); });

監(jiān)聽(tīng)文件變更自動(dòng)編譯并重啟服務(wù)

要實(shí)現(xiàn)這個(gè)功能就要使用到gulp-nodemon這個(gè)插件了，詳細(xì)的使用方法也直接點(diǎn)上面鏈接看就行了，這個(gè)東西踩過(guò)幾個(gè)坑需大家注意一下下面注釋的內(nèi)容。這個(gè)也就是最后的gulpfile了

var gulp = require('gulp'); var ts = require('gulp-typescript'); var sourcemaps = require('gulp-sourcemaps'); var nodemon = require('gulp-nodemon');var tsProject = ts.createProject('tsconfig.json');gulp.task('compile', function () {return tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()).pipe(sourcemaps.write()).pipe(gulp.dest('dist')); });gulp.task('watch', ['compile'], function () {return nodemon({script: 'dist/bin/www.js', // 服務(wù)的啟動(dòng)文件watch: 'src', // 源代碼目錄tasks: ['compile'], // 在重啟服務(wù)前需要執(zhí)行的任務(wù)ext: 'ts', // 監(jiān)聽(tīng).ts結(jié)尾的文件 必須// 設(shè)置環(huán)境env: {'NODE_ENV': 'development'},// 必須開(kāi)啟debug模式exec: 'node --debug'}); });

當(dāng)然啦，你也可以使用vsc里面task的功能，把他集成到vsc里面去，參考這個(gè)去做就行了，因?yàn)槲矣玫氖莔ac，直接把終端拖到另一個(gè)屏幕去了，要看輸出內(nèi)容的時(shí)候直接劃一下就行，所以沒(méi)有使用這個(gè)功能。

使用vsc進(jìn)行代碼調(diào)試

這里使用的是attach模式進(jìn)行調(diào)試，也就是由nodemon --debug來(lái)啟動(dòng)服務(wù)，并提供出一個(gè)debug的端口，然后我們用vsc接入進(jìn)行調(diào)試。
點(diǎn)擊進(jìn)入debug菜單

然后點(diǎn)擊

生成debug的配置文件(launch.json),這里提供下我配置好的，使用的時(shí)候注意把那些注釋刪掉。

{"version": "0.2.0","configurations": [{"name": "Attach","type": "node", // 必須為node，不能為node2"request": "attach","port": 5858, // 為node debug模式的端口號(hào)，默認(rèn)為5858"address": "localhost","restart": true, // 配合nodemon使用"sourceMaps": true, // 開(kāi)啟了sourcemap"outDir": "${workspaceRoot}/dist", // 輸出目錄"outFiles": [],"localRoot": "${workspaceRoot}","remoteRoot": null}] }

然后點(diǎn)擊

就可以了，注意要先運(yùn)行g(shù)ulp watch命令。

總結(jié)

以上是生活随笔為你收集整理的使用gulp和vsc构建高效的typescript开发环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。