初始化 npm 項(xiàng)目

yarn init

添加依賴(lài)

yarn add hapi

添加開(kāi)發(fā)依賴(lài)

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

yarn add typescript -D
yarn add nodemon -D

接下來(lái)，我們需要為 node 與 hapi 安裝類(lèi)型定義庫(kù)：

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

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

{
  "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 配置中，版本號(hào)可能與我的不同。

配置 TypeScript

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

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

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

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

tsconfig.json

TypeScript 會(huì)查詢(xún)名為 tsconfig.json 的配置文件來(lái)查找項(xiàng)目的入口文件以及編譯設(shè)置，關(guān)于它的詳細(xì)使用說(shuō)明，可以從 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 開(kāi)發(fā) Hapi 服務(wù)應(yīng)用

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

import * as hapi from "hapi";
// 創(chuàng)建一個(gè)服務(wù)器，監(jiān)聽(tīng) `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!";
  }
});
// 啟動(dòng)服務(wù)
async function start() {
  try {
    await server.start();
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
  console.log("Server running at:", server.info.uri);
}
// 不要忘記啟動(dòng)服務(wù)
start();

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

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

node_modules/typescript/bin/tsc

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

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

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

node dist/server.js

啟動(dòng)成功之后，終端將顯示：

Server running at: http://localhost:8000

使用 curl 測(cè)試一下我們的服務(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)啟動(dòng)成功了。

完成所有配置

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

{
  ...
  "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í)行以下代碼，即可啟動(dòng)一個(gè)實(shí)時(shí)編譯代碼并自動(dòng)重新服務(wù)的開(kāi)發(fā)環(huán)境了：

yarn start

它的作用是：nodemon 啟動(dòng)一個(gè)服務(wù)，監(jiān)聽(tīng)文件的變更，當(dāng)有任何文件變更之后，執(zhí)行 yarn run compile 命令（即執(zhí)行:tsc && node ./dist/server.js，以重啟服務(wù)。

以上就是TypeScript開(kāi)發(fā)HapiJS應(yīng)用詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript開(kāi)發(fā)HapiJS 的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論