【工程搭建】从零搭建一个 typescript + express + eslint 工程

前言

对于前端开发人员而言，​​ts​​​ 已经逐渐成为了一项必不可少的技能，类型检查可以帮助我们在开发时避免一些不必要的 ​​bug​​​ ，随着各种技术的不断成熟，在服务器端书写 ​​ts​​​ 也日益成为主流。本文将记录如何从零搭建一个 ​​typescript​​​ + ​​express​​​ + ​​eslint​​ 的工程。

安装依赖

npm i -D typescript       
npm i -D ts-node   
npm i -D nodemon       
npm i -D @types/node 
npm i -D @types/express
npm i -D eslint
npm i -D eslint-plugin-prettier
npm i -D prettier

配置文件

配置eslint

执行 ​​eslint --init​​ ，然后根据提示选择对应内容。

√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · No / Yes

根目录下会自动生成一个 ​​.eslintrc.js​​​ 文件，默认会是这样的，后续需要自定义什么规则，只需要在 ​​rules​​ 中添加即可。

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

配置tsconfig.json

以下是基础配置，更复杂细致的请移步官网。

{
  "compilerOptions": {
    // 编译选项
    "target": "es2016", // 编译目标代码的版本标准
    "module": "commonjs", // 编译目标使用的模块化标准
    "lib": [
      "es2016",
      "DOM"
    ], // 指定ts环境
    "outDir": "./dist", // 编译结果位置
    "removeComments": true, // 编译结果移除注释
    "strictNullChecks": true // 在严格的null检查模式下，null和undefined值不包含在任何类型里，只允许赋值给void和本身对应的类型
  },
  "include": [
    "./src"
  ] // 指定tsc编译的范围
  // "files": ["./src/index.ts"] // 指定编译文件，须删除"include"配置
}

配置package.json

在 ​​package.json​​​ 的 ​​scripts​​ 字段中添加如下语句。

  "scripts": {
    "dev": "nodemon --watch src -e ts --exec ts-node src/app.ts",
  },

--watch src: 只检测 ​​src​​ 文件夹

-e ts: 只检测 ​​.ts​​ 文件

初始化express服务

根目录下新建 ​​src/app.ts​​

// 引用express框架
const express = require('express')
// 创建注册页面路由
const router = express.Router()

// 匹配二级请求路径
router.get('/login', (req, res) => {
  res.send('hello world1234567')
})
// 创建网站服务器
const app = express()

// 为路由匹配一级请求路径
app.use('/user', router)

// 监听端口
app.listen(3000, () => {
  console.log('服务器启动成功')
})

启动服务

执行命令​​ npm run dev​​ 即可运行本地工程。

> nodemon --watch src -e ts --exec ts-node src/app.ts
[nodemon] 2.0.12
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src\**\*        
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/app.ts`     
服务器启动成功

到这里基础工程就搭建完成了，接下来就是愉快的敲代码环节了。