Node + Express + TypeScript项目搭建

本文链接： https://blog.csdn.net/qq_41984953/article/details/102677717

本文借鉴了:
https://www.wandouip.com/t5i348585/ 这篇文章为什么还要写：因为这篇文章写的不够详细和有的地方容易出错都去了但功能大致一样

前提：
请安装npm,typescript,tslint。命令以下
安装npm ：npm install -g npm
测试npm ：npm -v正确应出版本号

安装typescript：npm install -g typescript
测试typescript：tsc -v正确应出版本号

如果typescript安装出错看我的另一篇文章:
https://blog.csdn.net/qq_41984953/article/details/102677245

安装tslint ：npm install -g tslint
测试tslint ：tslint -v
以上可通过cmd安装，软件也可以运行

项目目录

   NodeExpressTypeScript   <--项目名称
           src：
                 app.ts
           .npmrc
           package.json
           package-lock.json
           tsconfig.json
           tslint.json

文件说明：
NodeExpressTypeScript/src/app.ts //程序主入口
NodeExpressTypeScript/.npmrc //项目 npm 配置文件，可针对项目单独设置npm的配置
NodeExpressTypeScript/package.json //项目模块描述文件
NodeExpressTypeScript/tsconfig.json //typescript配置文件
NodeExpressTypeScript/tslint.json //tslint配置文件

文件配置：
package.json
配置指令集合当我们使用npm run *时候，*表示我们再package.json的script节点下配置的指令.

{
  "scripts": {
    "tsc": "tsc",
    "dev": "ts-node-dev --respawn --transpileOnly ./src/app.ts",
    "prod": "tsc && node ./dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
   }
}

以上配置，当我们执行 npm run dev的时候，实践会将 dev后配置的语句进行执行注意最外面有大括号包围

下面我们安装 express 模块，在项目根目录下运行：
命令如下：npm install --save express // 安装普通 express 模块，并在 dependencies 下生成包记录

命令如下：npm install --save-dev express // 安装带有声明文件的 express 模块，并在 devDependencies 下生成包记录，仅开发模式下安装。

此时 package.json 如下（仅贴关键代码）：

"dependencies": {
  "express": "^4.17.1"
},
"devDependencies": {
  "@types/express": "^4.17.0"
}

注意加上前面配置的，package.json大致目录应为
{
“scripts”:{
},
“dependencies”:{
},
“devDependencies”:{
}
}

tsconfig.json
如果一个目录下存在存在 tsconfig.json 文件，那么就意味着这个目录是 typescipt 项目的根目录。tsconfig.json 定义了用来编译这个项目的根目录及编译选项。让我们一起来看看其中的一些关键配置项。

"target": "es6" // 指定 EECMAScript 的目标版本, 这里我们采用 es6
"module": "commonjs" // 指定编译生成哪个模块的系统代码，考虑到兼容性，这里我们设置成 commonjs
"moduleResolution": "node" // 决定如何处理模块。设置为 node
"outDir": "dist" // 编译输出目录，即 .ts 文件编译成 .js 文件后的输出目录。这里设置为根目录下的 /dist 目录
"baseUrl": "./" // 定义 ts 项目的根目录，设置 paths 前必须设置 baseUrl，paths中设置的路径是基于根目录来的
"include": ["src/**/*"] // 需要编译的 ts 文件，这里设置为 src 目录下的所有文件

搭建 express 服务
安装 body-parser 模块，用于处理 post 请求的请求体

命令如下：npm install --save body-parser

在 /src 目录下建立 config 目录下，目录下建立 index.ts，用于存放项目的一些公开修改配置，我们将 Express 服务占用的端口写在其中，代码如下：

const systemConfig = {
  port: 8000,
};

在 /src/app.ts 下创建 Express 服务

// 第三方模块
import bodyParser from 'body-parser';
import express from 'express';
import { NextFunction, Request, Response } from 'express'; // express 申明文件定义的类型

// 自定义模块
import { systemConfig } from './config';

const app = express();

// 处理 post 请求的请求体，限制大小最多为 20 兆
app.use(bodyParser.urlencoded({ limit: '20mb', extended: true }));
app.use(bodyParser.json({ limit: '20mb' }));

// error handler
app.use(function(err: Error, req: Request, res: Response, next: NextFunction) {
    return res.sendStatus(500);
});
app.get('/',function(req,res){
    res.send("Hello World!");
});
app.listen(systemConfig.port, function() {
    console.log(`the server is start at port ${systemConfig.port}`);
});

export default app;

运行项目：
npm run dev：运行的ts文件可查看packag.json配置
npm run prod：运行js文件可查看packag.json配置
npm run prod 命令是同时运行了两条命令tsc语句是把ts文件编译成js文件node ./dist/app.js命令是运行dist文件夹下的app.js
如前文配置的tsconfig.json文件下的outDir配置是运行tsc语句时会把ts格式的文件编译成的js格式的文件并放到dist文件夹下面

如果运行了npm run prod命令那么项目目录为：

 NodeExpressTypeScript   <--项目名称
          dist
                 config
                       index.js
                  app.js
           src：
                 config
                       index.ts
                 app.ts
           .npmrc
           package.json
           package-lock.json
           tsconfig.json
           tslint.json

Node + Express + TypeScript项目搭建

猜你喜欢