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

資訊專欄INFORMATION COLUMN

使用gulp和vsc構建高效的typescript開發環境

JerryZou / 1673人閱讀

摘要:出于某些原因,近期開始需要在公司推廣使用寫服務端,因為之前使用開發過多個個人項目,所以知道新手開發非常容易將代碼寫的散亂并且不易后人理解。所以折中的選擇了開發,也就用起了。

出于某些原因,近期開始需要在公司推廣使用nodejs寫服務端,因為之前使用es6開發過多個個人項目,所以知道新手開發node非常容易將代碼寫的散亂并且不易后人理解。本人剛入行的時候做的是java,覺得強類型的語言更加適合組織代碼和團隊合作,而且強類型語言因為類型強制聲明,所以IDE可以做到很好的代碼感知能力,因為有IDE的撐腰,所以開發大型系統,復雜系統比較有保障。所以折中的選擇了typescript開發,也就用起了vsc(visual studio code)。
無論什么語言什么項目,總得搭建起一個足夠高效可以讓自己開心的寫代碼的開發環境(還是叫開發流程?不知道怎么描述了,詞窮),以下是我對typescript開發流程的最低要求:

typescript代碼在我保存文件時自動編譯

編譯完成之后自動重啟服務

可以直接在typescript代碼上打斷點調試

最終效果:

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

gulp-nodemon

gulp-sourcemaps

gulp-typescript

先附上我的目錄結構:

使用gulp任務編譯ts文件

最最基礎的肯定是編譯ts文件了,這里用到的就是gulp-typescriptgulp-sourcemaps(用于生成映射),詳細的使用方法和可配置項可以直接點上面的鏈接進去看,這里我們需要根據tsconfig.json里的配置進行編譯,tsconfig.json都差不多的,我這里貼下我的。

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

需要注意的地方就是為了調試ts代碼的時候映射到編譯后的文件上,sourceMap必須要開啟,outDir也必須要指向正確的目錄。
然后就開始編寫gulp任務了,也是比較簡單的,就需要注意下這些流的順序

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"));
});

這樣我們在命令行運行gulp compile的時候,就會生成js文件了,打開js文件,在文件最下方也會有用于sourcemap的url,如果需要生成.map文件的話需要傳遞一個相對路徑給.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"));
});
監聽文件變更自動編譯并重啟服務

要實現這個功能就要使用到gulp-nodemon這個插件了,詳細的使用方法也直接點上面鏈接看就行了,這個東西踩過幾個坑需大家注意一下下面注釋的內容。這個也就是最后的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",  // 服務的啟動文件
        watch: "src",    // 源代碼目錄
        tasks: ["compile"], // 在重啟服務前需要執行的任務
        ext: "ts", // 監聽.ts結尾的文件 必須
        // 設置環境
        env: {
            "NODE_ENV": "development"
        },
        // 必須開啟debug模式
        exec: "node --debug"
    });
});

當然啦,你也可以使用vsc里面task的功能,把他集成到vsc里面去,參考這個去做就行了,因為我用的是mac,直接把終端拖到另一個屏幕去了,要看輸出內容的時候直接劃一下就行,所以沒有使用這個功能。

使用vsc進行代碼調試

這里使用的是attach模式進行調試,也就是由nodemon --debug來啟動服務,并提供出一個debug的端口,然后我們用vsc接入進行調試。
點擊進入debug菜單

然后點擊

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

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

然后點擊

就可以了,注意要先運行gulp watch命令。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91102.html

相關文章

  • 【全文】狼叔:如何正確學習Node.js

    摘要:感謝大神的免費的計算機編程類中文書籍收錄并推薦地址,以后在倉庫里更新地址,聲音版全文狼叔如何正確的學習簡介現在,越來越多的科技公司和開發者開始使用開發各種應用。 說明 2017-12-14 我發了一篇文章《沒用過Node.js,就別瞎逼逼》是因為有人在知乎上黑Node.js。那篇文章的反響還是相當不錯的,甚至連著名的hax賀老都很認同,下班時讀那篇文章,竟然坐車的還坐過站了。大家可以很...

    Edison 評論0 收藏0
  • 【全文】狼叔:如何正確學習Node.js

    摘要:感謝大神的免費的計算機編程類中文書籍收錄并推薦地址,以后在倉庫里更新地址,聲音版全文狼叔如何正確的學習簡介現在,越來越多的科技公司和開發者開始使用開發各種應用。 說明 2017-12-14 我發了一篇文章《沒用過Node.js,就別瞎逼逼》是因為有人在知乎上黑Node.js。那篇文章的反響還是相當不錯的,甚至連著名的hax賀老都很認同,下班時讀那篇文章,竟然坐車的還坐過站了。大家可以很...

    fengxiuping 評論0 收藏0
  • 類型系統-前端進化里程碑

    摘要:這些優勢,其實都是類型系統所帶來的強類型語言所具有的開發優勢,無論是在開發體驗還是后期項目維護上,都要優于目前的。 大半夜的JavaScript Weekly發來賀電:TypeScript 2.0 Final Released! 沒錯,繼Angular2發布之后,TypeScript今天也發布了2.0版本,這不禁讓我浮想一番。如果要說TS和JS最明顯的差別,我想一定是Type Syst...

    wangzy2019 評論0 收藏0
  • 從 JavaScript 到 TypeScript - 模塊化構建

    摘要:不過,相對于靜態類型檢查帶來的好處,這些代價是值得的。當然少不了的模塊化標準,雖然到目前為止和大部分瀏覽器都還不支持它。本身支持兩種模塊化方式,一種是對的模塊的微小擴展,另一種是在發布之前本身模仿的命名空間。有一種情況例外。 TypeScript 帶來的最大好處就是靜態類型檢查,所以在從 JavaScript 轉向 TypeScript 之前,一定要認識到添加類型定義會帶來額外的工作量...

    Jonathan Shieber 評論0 收藏0

發表評論

0條評論

JerryZou

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<