TS+Nodejs+Express構建用於前端除錯的WEB伺服器

Magic_Duck發表於2018-07-11
NodeJSExpress前端除錯Web伺服器

本文章最後更新時間：2018-01-19
個人部落格地址：blog.sqdyy.cn

一、內容介紹

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

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

  • 使用Nodejs建立web伺服器
  • 使用Express建立restful的http服務
  • 使用nodemon監控伺服器檔案的變化並自動重啟伺服器

二、構建你的WEB伺服器

  1. 首先建立一個server資料夾並使用npm命令進行初始化，我們使用typescript語言來開發我們的伺服器
npm init -y
複製程式碼
  1. 我們需要引入node的型別定義檔案，使用型別定義檔案的作用是使你能在typescript中使用已有的javascript的庫
npm i @types/node --save
複製程式碼
  1. 由於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"
    ]
}
複製程式碼

  1. 我們需要告知編譯器(vscode)使用這個配置檔案來編譯我們的typescript，使用快捷鍵ctrl+shift+b生成解決方案。

  2. 到這裡我們的開發環境就配置好了，現在讓我們開始編寫我們的伺服器檔案，先建立一個server/hello_server.ts檔案，這個伺服器非常簡單，只是接收一個http請求並響應一段文字資訊：

import * as http from 'http';

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

server.listen(8000);
複製程式碼
  1. 再次執行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);
複製程式碼
  1. 下面我們可以通過這個檔案來啟動我們的node伺服器了，執行以下指令啟動伺服器，然後訪問localhost:8000：
node build/hello_server.js
複製程式碼

三、使用Express框架簡化開發

Express是基於Node.js平臺，快速、開放、極簡的web開發框架，使用它的理由很簡單，我們使用原始的node進行開發，需要手動處理很多問題，比如讀取檔案，路由請求，處理各種不同的請求型別。而使用Express可以幫助你更快的處理這些事情。所以你應該到它的官網學習它。

  1. 首先我們安裝express框架：
npm install express --save
複製程式碼
  1. 然後我們引入express的型別定義檔案：
npm install @types/express --save
複製程式碼
  1. 現在我們可以用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");
});
複製程式碼
  1. 現在我們執行ctrl+shift+b，然後通過auction_server.js檔案啟動node伺服器：
node build/auction_server.js
複製程式碼

四、使用nodemon工具自動重新載入伺服器

我們已經學會構建一個node伺服器了，但是它非常的不方便，當我們修改了專案程式碼後，伺服器不會自動重啟。這樣就非常的煩人，很浪費時間，於是有大神開發了自動重啟的工具nodemon，下面我們來安裝它。

1.首先我們安裝nodemon：

npm install -g nodemon
複製程式碼

2.執行以下命令來啟動伺服器：

nodemon build/auction_server.js
複製程式碼

其實還有更快捷的方法可以直接自動編譯同時自動重新載入伺服器，如果你有興趣，請參考這篇文章：使用vscode 搭建 typescript 的nodejs 自動編譯自動啟動服務

相關文章