Express+ts开发环境搭建

# nodejs # express

Monday , 2022-10-10 10:51

ts是个好东西，属于用过你就回不去，但是express还是需要自己去配置一二，这里使用脚手架搭建的基础框架 https://www.expressjs.com.cn/starter/generator.html

package.json命令与开发依赖,dev与server加入了环境变量，后续用于区分运行目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "name": "express-test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "ts-node ./bin/www",
    "dev": "set NODE_ENV=development && nodemon -e ts --exec && ts-node ./bin/www",
    "build": "tsc",
    "server": "set NODE_ENV=production && tsc && node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.8.3",
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.8.4"
  }
}

生成目录后cnpm install依赖之后，将目录与js文件改造为以下目录与ts文件

image.png

配置加入的tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "outDir": "build",
      "rootDir": "src",
      "lib": [
          "es6"
      ],
      "sourceMap": true
  },
  "exclude": [
      "node_modules"
  ]
}

改造app.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 引入类型定义
import { NextFunction,Response,Request, Errback } from "express";

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
console.log(process.env.NODE_ENV);
//这里需要用path模块，避免打包环境找不到路径
app.set('views', path.resolve('src', 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//这里需要用path模块，避免打包环境找不到路径
app.use(express.static(path.resolve('src', 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
//这里就可以正常使用类型定义了
app.use(function(req:Request, res:Response, next:NextFunction) {
  next(createError(404));
});

// error handler
app.use(function(err:any, req:Request, res:Response, next:NextFunction) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

做启动配置/bin/www，这里主要是将app的引用地址做环境变量判断，生产环境用打包出来的js文件运行

var app = require(process.env.NODE_ENV=='development' ? '../src/app' : '../build/app');

image.png

当使用npm run build或者npm run server的时候，tsc配置应用与打包到build目录

image.png

最后npm run dev 或者npm run server就可以开始愉快的ts后端开发了。