记录：学习koa+TS（一）Koa 是一个新的 web 框架，通过利用 async 函数，Koa帮你丢弃回调函数，并有力

初始化项目

创建文件夹 `koa-demo`, 使用 npm 或 yarn 执行初始化命令

npm 初始化：  npm init -y
yarn 初始化： yarn init -y

安装依赖

// 安装koa koa路由 koa-bodyparser: 处理post请求参数
npm i koa koa-bodyparser koa-router
// 安装类型注解
npm i @types/koa @types/koa-bodyparser @types/koa-router -D
// 安装ts ts-node：ts的node运行环境
npm i typescript ts-node -D

创建入口文件

根目录创建 src 文件夹，src 文件夹下创建 app.ts 文件

import Koa from 'koa'

// 创建koa实例
const app = new Koa()

// 监听端口
app.listen(9000, () => {
  console.log('成功了')
  console.log(`Local: http://localhost:9000/`)
})

项目配置

约束代码风格

// 安装 eslint prettier 
// eslint-config-prettier: 解决eslint和prettier的冲突
npm i eslint prettier eslint-config-prettier -D
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

项目根目录创建 .eslintrc.js

// .eslintrc.js
module.exports = {
  root: true,

  env: {
    node: true,
    es2021: true,
  },

  parser: "@typescript-eslint/parser",

  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.json"],
  },

  plugins: ["@typescript-eslint"],
  rules: {
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "no-useless-escape": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/await-thnable": "off",
    "@typescript-eslint/restrict-template-expressions": "off",
    "@typescript-eslint/no-misused-promises": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unsafe-call": "off",
    "@typescript-eslint/no-unsafe-argument": "off",
    "no-async-promise-executor": "off",
    "@typescript-eslint/no-floating-promises": "off",
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/ban-types": "off",
    "no-prototype-builtins": "off",
    "space-before-function-paren": 0,
  },

  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
  ],
}

根目录下创建 .prettierrc

// .prettierrc
{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "prettier.spaceBeforeFunctionParen": true
}

配置热更新

安装 nodemon，当检测到目录中的文件更改时，它会自动重启node应用程序

npm i nodemon -D

配置 nodemon，根目录创建文件 nodemon.json

{
  "watch": ["src/**/*.ts"], // nodemon 监听的文件
  "ignore": ["node_modules"] // nodemon 忽略的文件
}

nodemon.json 其他配置

restartable：设置重启模式
verbose：设置日志输出模式，true为详细模式
watch：需要监听的文件
ignore：忽略的文件
delay：设置延迟时间
exec：执行的命令
ext：文件后缀名

配置路径别名

安装 module-alias

npm i module-alias @types/module-alias -D

根目录创建 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015", // 目标语言版本
    "module": "commonjs", // 指定生成代码的模板标准
    "rootDir": "./", // 指定输出目录, 默认是dist文件夹
    "strict": true, // 严格模式
    "allowSyntheticDefaultImports": true, // 没有默认导出时, 编译器会创建一个默认导出
    "esModuleInterop": true, // 允许export= 导出, 由import from导入
    "forceConsistentCasingInFileNames": true, // 强制区分大小写
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["module-alias"]
  },

  "include": [
    // 需要编译的的文件和目录
    "src/**/*"
  ],
  "files": ["src/app.ts"]
}

修改 package.json

...
"_moduleAliases": {
    "@": "./src"
},
...

修改入口文件 /src/app.ts

// 添加导入
import 'module-alias/register'
...

配置环境变量

// 安装 cross-env
npm i cross-env -D
// 安装 dotenv
npm i dotenv

修改 package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon -e ts --exec ts-node ./src/app.ts --files",
    "build": "tsc && cross-env NODE_ENV=production node dist/src/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},

根目录创建 .env文件

NODE_ENV=dev
SERVER_PORT=8686
DB_HOST=localhost
DB_NAME=my_db
DB_USER=root
DB_PASSWORD=123456
DB_PORT=3306

创建 src/config/index.ts文件

const config = {
  server: {
    port: process.env.SERVER_PORT
  },
  db: {
    db_host: process.env.DB_HOST,
    db_name: process.env.DB_NAME,
    db_user: process.env.DB_USER,
    db_password: process.env.DB_PASSWORD,
    db_port: process.env.DB_PORT
  }
}

export default config

修改 app.ts文件

import dotenv from 'dotenv'
dotenv.config() // config() 中是配置.env文件的位置，如果在根目录，此处括号中可以留空
import 'module-alias/register'
import Koa from 'koa'
import config from "@/config";

// 创建koa实例
const app = new Koa()

// 监听端口
const port = config.server.port;
app.listen(port, () => {
  console.log(`服务启动：http://localhost:${port}`)
})

记录：学习koa+TS（一）