TS+Nodejs+Express構建用於前端調試的WEB服務器

本文章最後更新時間：2018-01-19
我的博客地址：blog.sqdyy.cn

1、內容介紹

本文將簡述如何使用vscode [Visual Studio Code]開發工具來搭建一套TypeScript的開發環境，其中咱們會使用Express這套靈活的web應用開發框架來提升咱們的編碼效率，另外咱們還會增長nodemon這個程序來自動監控你源代碼的改變並自動從新啓動服務器。寫這篇文章的目的是落地留痕，同時也但願能對一些剛入門的小夥伴有必定的參考價值。

閱讀本文的前置知識是須要你對webpack和Typescript語法有必定的瞭解，閱讀本文，你將入門：

• 使用Nodejs建立web服務器
• 使用Express建立restful的http服務
• 使用nodemon監控服務器文件的變化並自動重啓服務器

---

2、構建你的WEB服務器

1. 首先建立一個server文件夾並使用npm命令進行初始化，咱們使用typescript語言來開發咱們的服務器

npm init -y
複製代碼

2. 咱們須要引入node的類型定義文件，使用類型定義文件的做用是使你能在typescript中使用已有的javascript的庫

npm i @types/node --save
複製代碼

3. 因爲nodejs自己是不能直接識別typescript，因此咱們須要將typescript編譯成javascript，因此建立下面的tsconfig.json配置文件，用於告訴編譯器如何將typescript編譯成javascript，詳細配置請參考typescript官方文檔：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "build",
        "lib": [
            "es6"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
複製代碼

4. 咱們須要告知編譯器(vscode)使用這個配置文件來編譯咱們的typescript，使用快捷鍵ctrl+shift+b生成解決方案。

5. 到這裏咱們的開發環境就配置好了，如今讓咱們開始編寫咱們的服務器文件，先建立一個server/hello_server.ts文件，這個服務器很是簡單，只是接收一個http請求並響應一段文本信息：

import * as http from 'http';

const server = http.createServer((req,resp) => {
    resp.end("Hello Node!");
});

server.listen(8000);
複製代碼

6. 再次執行ctrl+shift+b對該文件進行編譯，首次執行會提高缺乏.vscode/tasks.json文件，建立它並繼續執行ctrl+shift+b，此時根據tsconfig.json的配置，會在build目錄下生成編譯後的javascript代碼：

// build/hello_server.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var http = require("http");
var server = http.createServer(function (req, resp) {
    resp.end("Hello Node!");
});
server.listen(8000);
複製代碼

7. 下面咱們能夠經過這個文件來啓動咱們的node服務器了，執行如下指令啓動服務器，而後訪問localhost:8000：

node build/hello_server.js
複製代碼

---

3、使用Express框架簡化開發

Express是基於Node.js平臺，快速、開放、極簡的web開發框架，使用它的理由很簡單，咱們使用原始的node進行開發，須要手動處理不少問題，好比讀取文件，路由請求，處理各類不一樣的請求類型。而使用Express能夠幫助你更快的處理這些事情。因此你應該到它的官網學習它。

1. 首先咱們安裝express框架：

npm install express --save
複製代碼

2. 而後咱們引入express的類型定義文件：

npm install @types/express --save
複製代碼

3. 如今咱們能夠用typescript的代碼來使用express的API了，咱們建立一個新的服務器配置文件server/auction_server.ts：

import * as express from 'express';

const app = express(); // 用於聲明服務器端所能提供的http服務

// 聲明一個處理get請求的服務
app.get('/', (req, resp) => {
    resp.send("Hello Express");
});

app.get("/products", (req, resp) => {
    resp.send("接收到商品查詢請求");
});

const server = app.listen(8000, "localhost", () => {
    console.log("服務器已啓動, 地址是：http://localhost:8000");
});
複製代碼

4. 如今咱們執行ctrl+shift+b，而後經過auction_server.js文件啓動node服務器：

node build/auction_server.js
複製代碼

---

4、使用nodemon工具自動從新加載服務器

咱們已經學會構建一個node服務器了，可是它很是的不方便，當咱們修改了項目代碼後，服務器不會自動重啓。這樣就很是的煩人，很浪費時間，因而有大神開發了自動重啓的工具nodemon，下面咱們來安裝它。

1.首先咱們安裝nodemon：

npm install -g nodemon
複製代碼

2.執行如下命令來啓動服務器：

nodemon build/auction_server.js
複製代碼

---

其實還有更快捷的方法能夠直接自動編譯同時自動從新加載服務器，若是你有興趣，請參考這篇文章：使用vscode 搭建 typescript 的nodejs 自動編譯自動啓動服務