TS+Nodejs+Express构建用于前端调试的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
复制代码

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
复制代码

---

三、使用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
复制代码

---

四、使用nodemon工具自动重新加载服务器

我们已经学会构建一个node服务器了，但是它非常的不方便，当我们修改了项目代码后，服务器不会自动重启。这样就非常的烦人，很浪费时间，于是有大神开发了自动重启的工具nodemon，下面我们来安装它。

1.首先我们安装nodemon：

npm install -g nodemon
复制代码

2.执行以下命令来启动服务器：

nodemon build/auction_server.js
复制代码

---

其实还有更快捷的方法可以直接自动编译同时自动重新加载服务器，如果你有兴趣，请参考这篇文章：使用vscode 搭建 typescript 的nodejs 自动编译自动启动服务