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 自动编译自动启动服务