使用 TypeScript 開發(fā) HapiJS 應(yīng)用

cheukyin 發(fā)布于2019-06-26 18:04 / 2294人閱讀

摘要：配置設(shè)計項(xiàng)目文件目錄結(jié)構(gòu)在項(xiàng)目的根目錄下，創(chuàng)建一個名為的目錄，用于包含系統(tǒng)的所有源代碼文件，接著，創(chuàng)建一個名為的目錄，用于保存由編譯后的文件。

初始化 npm 項(xiàng)目

yarn init

添加依賴

yarn add hapi

添加開發(fā)依賴

要在開發(fā)中使用 TypeScrip，同時至少需要有一個工具，可以一直監(jiān)聽項(xiàng)目文件的變更，并實(shí)時的將變更更新至啟動的服務(wù)中，我選擇使用 Nodemon，首先添加以下幾個開發(fā)依賴

yarn add typescript -D
yarn add nodemon -D

接下來，我們需要為 node 與 hapi 安裝類型定義庫：

yarn add @types/node -D
yarn add @types/hapi -D

安裝完成之后， package.json 文件看起來像下面這樣的：

{
  "name": "hapiserver",
  "version": "0.0.1",
  "description": "API server",
  "main": "index.js",
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "hapi": "^18.1.0"
  },
  "devDependencies": {
    "@types/hapi": "^18.0.2",
    "@types/node": "^12.0.2",
    "nodemon": "^1.19.0",
    "typescript": "^3.4.5"
  }
}

注意：你的 dependencies 與 devDependencies 配置中，版本號可能與我的不同。

配置 TypeScript 設(shè)計項(xiàng)目文件目錄結(jié)構(gòu)

在項(xiàng)目的根目錄下，創(chuàng)建一個名為 src 的目錄，用于包含系統(tǒng)的所有源代碼文件，接著，創(chuàng)建一個名為 dist 的目錄，用于保存由 typescript 編譯后的 javascript 文件。

注意：文件結(jié)構(gòu)并不是強(qiáng)制的，你可以完全按照自己的習(xí)慣和規(guī)范來進(jìn)行

.
├── dist
├── node_modules
├── package.json
├── src
└── yarn.lock

tsconfig.json

TypeScript 會查詢名為 tsconfig.json 的配置文件來查找項(xiàng)目的入口文件以及編譯設(shè)置，關(guān)于它的詳細(xì)使用說明，可以從 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 查閱，在這里，我們先填入以下內(nèi)容：

{
  "compilerOptions": {
    "outDir": "./dist",
    "allowJs": false,
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "moduleResolution": "node"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

在 tsconfig.json 文件中，我們定義了 outDir 的值為 ./dist，它告訴編譯器，編譯后的輸出目錄為 ./dist 文件夾，現(xiàn)在可以直接在項(xiàng)目根目錄執(zhí)行以下代碼，即可編譯 src 目錄下的 TypeScript 代碼至 dist 目錄下的 JavaScript 文件了。

node_modules/typescript/bin/tsc

用 TypeScript 開發(fā) Hapi 服務(wù)應(yīng)用

在 src 目錄下，創(chuàng)建一個名為 server.ts 的文件，內(nèi)容如下：

import * as hapi from "hapi";

// 創(chuàng)建一個服務(wù)器，監(jiān)聽 `localhost` 上的 `8000` 商品
const server: hapi.Server = new hapi.Server({
  host: "localhost",
  port: 8000
});

// 添加路由
server.route({
  method: "GET",
  path: "/hello",
  handler: function(request, h) {
    return "Hello! TypeScript!";
  }
});

// 啟動服務(wù)
async function start() {
  try {
    await server.start();
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
  console.log("Server running at:", server.info.uri);
}

// 不要忘記啟動服務(wù)
start();

由于我們的代碼是由 TypeScript 寫的，所以現(xiàn)在還沒有辦法直接運(yùn)行，需要先將其編譯為 JavaScript 代碼之后再運(yùn)行：

使用下面的命令編譯代碼：

node_modules/typescript/bin/tsc

編譯完成之后，將得到下面這樣的兩個文件：

dist
├── server.js
└── server.js.map

此時，執(zhí)行下面的代碼，啟動服務(wù)：

node dist/server.js

啟動成功之后，終端將顯示：

Server running at: http://localhost:8000

使用 curl 測試一下我們的服務(wù)：

$ curl -i http://localhost:8000/hello
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
cache-control: no-cache
content-length: 18
accept-ranges: bytes
Date: Fri, 17 May 2019 01:58:50 GMT
Connection: keep-alive

Hello! TypeScript!

已經(jīng)啟動成功了。

完成所有配置

我們總不能每改一次代碼，都手工執(zhí)行一次編譯，再重新啟動服務(wù)，可以在 package.json 中添加兩個命令：

{
  ...
  "scripts": {
    "start": "./node_modules/nodemon/bin/nodemon.js -e ts  --exec "yarn run compile"",
    "compile": "tsc && node ./dist/server.js"
  },
  ...
}

現(xiàn)在，只需要在項(xiàng)目根目錄下執(zhí)行以下代碼，即可啟動一個實(shí)時編譯代碼并自動重新服務(wù)的開發(fā)環(huán)境了：