轉(zhuǎn)發(fā)
TypeScript 3 + Koajs + Node.js
自NodeJS早期以來(lái)，Express一直是NodeJS開(kāi)發(fā)人員事實(shí)上的標(biāo)準(zhǔn)Web框架赡鲜。
但是埂材，JavaScript在過(guò)去幾年中已經(jīng)走過(guò)了漫長(zhǎng)的道路痒玩，像promises和async函數(shù)這樣的功能使得構(gòu)建更小愤估，更強(qiáng)大的Web框架成為可能。
Koa就是這樣一個(gè)框架玄妈。
它由Express背后的團(tuán)隊(duì)構(gòu)建乾吻，以利用最新的JavaScript和NodeJS功能，特別是異步功能拟蜻。
與Express和其他node框架（如Hapi）不同绎签，Koa不需要使用回調(diào)。
這消除了難以跟蹤的錯(cuò)誤的巨大潛在來(lái)源酝锅，并使框架非常容易為新開(kāi)發(fā)人員選擇诡必。
在本文中，我將向您介紹如何使用Koa和TypeScript來(lái)開(kāi)發(fā)新的Web應(yīng)用程序項(xiàng)目
第一步搔扁、安裝和配置
Koa需要一個(gè)具有異步功能支持的Node版本爸舒，因此在開(kāi)始之前確保安裝了Node 8.x（或更高版本）。
Node 8將于2017年10月成為新的長(zhǎng)期支持版本稿蹲，因此它是啟動(dòng)新項(xiàng)目的絕佳選擇扭勉。
我們現(xiàn)在將創(chuàng)建一個(gè)安裝了以下內(nèi)容的新node項(xiàng)目：
1. Koa
2. Koa Router
3. TypeScript
4. TS-Node 和 Nodemon(用于在開(kāi)發(fā)期間自動(dòng)構(gòu)建和重啟)
為項(xiàng)目創(chuàng)建一個(gè)新文件夾，然后執(zhí)行以下命令：
npm init # and follow the resulting prompts to set up the project
npm i koa koa-router
npm i --save-dev typescript ts-node nodemon
npm i --save-dev @types/koa @types/koa-router
現(xiàn)在苛聘，在項(xiàng)目的根目錄中涂炎，創(chuàng)建一個(gè)新的tsconfig.json文件并添加以下內(nèi)容：
{
"compilerOptions": {
"module": "commonjs",
"target": "es2017",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"./src/***/*",
]
}
請(qǐng)注意，我們將TypeScript配置為轉(zhuǎn)換為ES2017 - 這可確保我們利用Node的本機(jī)async/await功能设哗。
第二步唱捣、創(chuàng)建服務(wù)器
由于Koa的核心是微框架，因此啟動(dòng)和運(yùn)行它非常簡(jiǎn)單网梢。在項(xiàng)目目錄中震缭，創(chuàng)建一個(gè)src文件夾，在其中創(chuàng)建一個(gè)新文件：server.ts战虏，其中包含以下內(nèi)容：
import * as Koa from 'koa';
import * as Router from "koa-router";
const app = new Koa();
const router = new Router();
router.get('/*', async (ctx) => {
ctx.body = "Hi TS";
})
app.use(router.routes());
app.listen(8080);
console.log("Server running on port 8080");
第三步拣宰、使用Nodemon和TS-Node運(yùn)行服務(wù)器
在開(kāi)發(fā)過(guò)程中，每次進(jìn)行更改時(shí)都要記住重新啟動(dòng)服務(wù)器會(huì)很麻煩烦感，所以我想設(shè)置我的服務(wù)器端項(xiàng)目以自動(dòng)重新啟動(dòng)代碼更改徐裸。
為此，我們將向我們的項(xiàng)目添加watch-server npm腳本啸盏。
為此，請(qǐng)將以下內(nèi)容添加到package.json的"scripts"部分：
"watch-server": "nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts"
現(xiàn)在開(kāi)始新的TypeScript Koa項(xiàng)目骑祟，只需執(zhí)行以下操作即可
npm run watch-server
您應(yīng)該看到以下輸出：
> ts_node_koa_blog@1.0.0 watch-server /Users/durban/nodejs/ts_node_koa_blog
> nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts
[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: src/***/*
[nodemon] starting `ts-node ./src/server.ts`
Server running on port 8080
現(xiàn)在您應(yīng)該能夠在瀏覽器中訪問(wèn)http//localhost:8080/ :)
第四步回懦、構(gòu)建應(yīng)用程序 - 添加中間件
主要的Koa庫(kù)只包含基本的HTTP功能气笙。
要構(gòu)建完整的Web應(yīng)用程序，我們需要添加適當(dāng)?shù)闹虚g件怯晕，例如Logging, Error Handling, CSRF Protection等潜圃。在Koa中，中間件本質(zhì)上是一堆函數(shù)舟茶，通過(guò)app.use()創(chuàng)建谭期。
收到Web請(qǐng)求后，它將傳遞給堆棧中的第一個(gè)函數(shù)吧凉。
該函數(shù)可以處理請(qǐng)求隧出，然后可選地將其傳遞給下一個(gè)中間件函數(shù)。
讓我們將上面的示例擴(kuò)展為包含一個(gè)中間件函數(shù)阀捅，該函數(shù)將每個(gè)Web請(qǐng)求的URL記錄到控制臺(tái)：
import * as Koa from 'koa';
import * as Router from "koa-router";
const app = new Koa();
app.use(async (ctx, next) => {
// Log the request to the console
console.log("Url: ", ctx.url);
// Pass the request to the next middleware function
await next();
})
const router = new Router();
router.get('/*', async (ctx) => {
ctx.body = "Hi TS";
})
app.use(router.routes());
app.listen(8080);
console.log("Server running on port 8080");
在上面的示例中胀瞪，我們現(xiàn)在定義兩個(gè)中間件函數(shù)：
1. 第一個(gè)中間件函數(shù)從請(qǐng)求上下文(ctx.url)獲取Url，并使用console.log()將其輸出到控制臺(tái)
2. 然后該函數(shù)await next()饲鄙，告訴Koa將請(qǐng)求傳遞給堆棧中的下一個(gè)中間件函數(shù)
3. 第二個(gè)中間件函數(shù)來(lái)自koa-router - 它使用請(qǐng)求的url來(lái)匹配我們通過(guò)router.get()配置的路由現(xiàn)在凄诞，當(dāng)您在瀏覽器中訪問(wèn)http://localhost:8080/時(shí)，您應(yīng)該看到類似于以下內(nèi)容的輸出：
> ts_node_koa_blog@1.0.0 watch-server /Users/durban/nodejs/ts_node_koa_blog
> nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts
[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: src/***/*
[nodemon] starting `ts-node ./src/server.ts`
Server running on port 8080
Url: /
Url: /
Url: /blog
Url: /blog
第五步忍级、標(biāo)準(zhǔn)中間件
顯然帆谍，你真的不想為你的網(wǎng)絡(luò)應(yīng)用重新發(fā)明輪子。
根據(jù)您要?jiǎng)?chuàng)建的應(yīng)用程序類型轴咱，以下中間件可能很有用：
Koa路由器
https://github.com/alexmingoia/koa-routerKoa Body Parser（用于JSON和Form Data支持）
https://github.com/dlau/koa-bodyKoa Cross-Site-Request-Forgery（CSRF）預(yù)防
https://github.com/koajs/csrfKoa Examples（許多有用的東西汛蝙，包括錯(cuò)誤處理）
https://github.com/koajs/examples
我已經(jīng)創(chuàng)建了一個(gè)基本的TypeScript和Koa項(xiàng)目∴戮粒可以進(jìn)行后面自己感興趣的開(kāi)發(fā)了患雇。
