用 TypeScript 寫 gulp 構(gòu)建

我在項目中經(jīng)常使用前端構(gòu)建技術來生成網(wǎng)頁需要腳本和樣式表。多數(shù)時候是采用 gulp + webpack (babel-loader | ts-loader) 的方案，在 Node7 下運行甚至可以使用 async 語法——當然大部分都是配置，只在 gulpfile.js 里會有少量的腳本代碼。

注：node7 在 7.6 以前需要 --harmony_async_await 來支持 async function 語法，但從 7.6 開始不再需要這個參數(shù)。

不過最近遇到一點麻煩，因為我們需要使用 gulp 來構(gòu)建一堆文檔。文檔是用 Markdown 寫的，需要構(gòu)建成靜態(tài) HTML 頁面。考慮過 Jekyll，但是團隊里沒有人用過。所以最終決定用 marked 來轉(zhuǎn)換 Markdown，自己寫腳本定制——gulp 里引入邏輯模塊是很容易的事件，跟寫 node 程序一樣。

但是構(gòu)建文檔這個需求與之前的構(gòu)建有很大不同。之前的構(gòu)建幾乎只需要配置，而這次需要寫大量的業(yè)務代碼，這就意味著產(chǎn)生 BUG 的風險大大增加。按慣例，業(yè)務邏輯我們通常會用 TypeScript 來寫，TypeScript 的靜態(tài)類型特性會在我們編寫代碼的時候(配合合適的編輯器，比如 VSCode)就檢查不少問題出來，能大大降低產(chǎn)生 BUG 的風險。

我們初步的方案是，像其它前端腳本類似，用 TypeScript 寫完了使用 tsc 轉(zhuǎn)譯成 JavaScript，再用 gulp 來運行 JavaScript 生成文檔。方案雖然可行，但卻將構(gòu)建過程的復雜度增加了一倍。要是 Node 能直接運行 TypeScript 就好了……

用 Node 直接運行 TypeScript，有這種想法的人肯定不只我一個。而且之前也曾了解到 babel-register (或 "babel-core/register") 可以改變 Node 的 require，在加載腳本的時候先對其進行轉(zhuǎn)譯。既然技術上是可行的，那就是找有沒有現(xiàn)成的實現(xiàn)了。

通過 typescript node 關鍵字找到了 npm 上的 tyepscript-node 模塊，而這個模塊說明文檔的第一句話就寫著：

DEPRECATED: Use ts-node instead.

所以我們要找的實際上是 ts-node。它的文檔中還專門提到創(chuàng)建 gulpfile.ts 文件，然后直接運行 gulp 就行。

為了試驗 gulp 直接運行 TypeScript 腳本。先建了一個臨時的 Node 項目目錄，安裝 gulp 模塊。再建立一個 gulpfile.ts 測試文件，使用 TS 支持但 Node 不運行的 import 語法

import gulp = require("gulp");


gulp.task("default", () => {
    console.log("hello, gulp with typescript");
});

然后運行(當前是Windows環(huán)境)。在沒添加 ts-node 模塊之前，運行結(jié)果會拋出一些錯誤

好吧，gulp 想得還是挺周到，居然嘗試了 4 個 typescript node register 模塊。其中 ts-node 是首先嘗試的，且當它是 gulp 推薦的。typescript-node 已經(jīng)申明用 ts-node 替代了。

現(xiàn)在我們安裝 ts-node 模塊，之后再運行一次

gulp 提示它使用了 ts-node 模塊，不過因為沒有安裝 typescript 模塊，所以運行失敗。安裝好 typescript 模塊之后再試一次，

運行成功。

順便提一下，如果不是構(gòu)建應用，而是 Node Web 應用，需要注冊 ts-node，它的文檔中提供了兩個方法

require("ts-node").register({ /* options */ });

上面這種方法可以加一些選項，這些選項并不是 tsconfig.js 中的選項，而是 ts-node 自己的一些選項，具體可以參考 ts-node 的文檔。

而下面這種方法，似乎是一種快捷方式，但它只能使用默認選項(多數(shù)情況下默認選項足夠)。

require('ts-node/register')

ts-node 會自己加載使用 tsconfig.json。

當然，直接運行 node 程序的時候，不像 gulp 內(nèi)置了注冊和啟動過程，所以需要一個 JavaScript 的啟動程序，假設是 start.js，它應該這樣寫

// start.js
require('ts-node/register');
require("app")

當然，還可以加一些其它邏輯在里面，比如在開發(fā)環(huán)境下注冊 ts-node 運行 app.ts，而在生產(chǎn)環(huán)境下直接運行轉(zhuǎn)譯好的 app.js。

敬請 掃碼 關注〔邊城〕的公眾號：邊城客棧