npm i -g ts-node
TypeScript+Koa2打造Node Server后端接口服务(一): 搭建环境
前言
Node的发展对前端工程化是具有重要意义的, 在其优势和特点下, 越来越多的公司开始使用Node进行接口服务的开发, 我也是在这个过程中不断地学习Node开发, 利用目前社区主流的技术栈, 开启Node Server接口服务的学习过程并记录分享, 欢迎大家一起讨论, 共同学习.
概述
TypeScript
TypeScript 是 JavaScript 的超集, 它提供了静态语言强类型的支持, 在编译阶段提早发现类型的错误, 避免在运行时出现的类型错误, 结合 VSCode 提高开发的舒适度和效率. 除此之外, TypeScript 的 Interface 和泛型等等类似Java , C# 的特性在多人合作的大型项目中, 也是一个比较好用的功能特性.
例如:
用 ts 写一个两个数字相加的函数:
function sum(a: number, b: number) {
return a + b;
}
如果调用 sum('1', 1) , 会报参数类型错误.
编译成 js 后为:
function sum(a, b) {
return a + b;
}
Koa2
Koa2 是 Node.js 中一个轻量级 web 框架, 相比于 Express, 它仅仅提供了一个 http server, 其它类似路由等等都是通过安装中间件包增强功能. 由于 Koa2 依赖更高的 Node 版本, 由此 async/await 在高版本Node得到更好地支持, 解决了回调嵌套的问题.
Koa2官网
中间件列表
开发环境搭建
环境依赖
Node版本建议使用 nvm 管理, nvm github
- Node v8.9.1
- npm v5.5.1
- nodemon v1.14.7
环境搭建
项目结构
- .vscode(vscode配置)
- dist(编译后JavaScript文件)
- src(开发目录)
- package.json(项目配置)
- tsconfig.json(TypeScript配置)
- tslint.json(TypeScript语法规则检测配置)
安装
npm install --save koa
npm install -g nodemon
npm install --save-dev @types/koa tslint typescript
typescript配置
- tsconfig.json 配置:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2015",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
- tslint.json配置
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces",
2
],
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"no-var-keyword": true,
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [
true,
"always",
"ignore-bound-class-methods"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-null-keyword": true,
"prefer-const": true,
"jsdoc-format": true
}
}
npm script配置
package.json 配置:
"scripts": {
"start": "npm run serve",
"serve": "node dist/server.js",
"build": "npm run tslint && npm run build-ts",
"build-ts": "tsc",
"watch": "npm run tslint && npm run watch-ts",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
}
VSCode debug配置
- launch.json 配置:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node调试",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/dist/server.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/dist/server.js",
"preLaunchTask": "npm: build",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
Note: nodemon 是一个监听文件改变自动重启Node Server服务的工具.
- tasks.json 配置:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
这样, 我们初始化开发环境已经完成, 接下来, 我们开始启动服务.
启动服务
我们在开发过程中, 将会启用ts服务监听文件变化, 实时编译成js, 执行以下命令:
npm run watch
然后在 VSCode debug 中启动名称为 Node调试 配置的服务, 接下来就可以开始编写你的代码, 断点调试等等.
完成第一个Node Server
在 src 目录下新建一个 app.ts , 编写代码:
import * as Koa from 'koa';
const app = new Koa();
app.use(ctx => {
ctx.body = 'Hello world';
});
module.exports = app;
新建 server.ts , 编写代码:
const app = require('./app');
const server = app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
console.log('Press CTRL-C to stop \n');
});
module.exports = server;
打开浏览器, 输入 http://localhost:3000 , 将会看到页面输入一个 Hello world 的文本. 至此, Node Server 开发环境搭建完成. 接下来, 开始 API 的开发.
很酷用ts，代码修改自动更新，太厉害了。牛