目录
初始化项目
环境准备
安装环境
初始化
tsconfig.json
简单搭建 Koa 服务器
完整项目搭建
依赖安装
构建目录结构
修改 package.json
代码规范
eslint
prettier
初始化项目
环境准备
与之前使用JavaScript 开发后台不同，区别如下：
自动编译运行的插件由
nodemon替换为
ts-node-
dev。
在TypeScript环境下，需要使用到ES6模块化规范。而非CommonJS规则。
使用TypeScript语法进行开发，再开发结束后，需要进行编译打包为JavaScript去运行。
安装环境
?
1
yarn global add ts-node-dev typescript
ts-node-dev：与nodemon功能类似，在修改代码之后，保存即可生效，无需手动重启。
?
1
2
3
4
5
6
7
8
# 例如
ts-node-dev src/app.ts
# 如果想要监听文件的改变需要加上 –respawn 参数
ts-node-dev –respaswn src/app.ts
# 使用简短的别名
tsnd –respawn src/app.ts
初始化 tsconfig.json
?
1
2
# 生成tsconfig.json
tsc –init
修改tsconfig.json如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
“compilerOptions”: {
“target”: “esnext”, // 目标语言版本
“module”: “commonjs”, // 指定生成代码的模板标准
“sourceMap”: true,
“outDir”: “./dist”,
“rootDir”: “./src”, // 指定输出目录, 默认是dist文件夹
“strict”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“skipLibCheck”: true,
“forceConsistentCasingInFileNames”: true
},
// 需要编译的的文件和目录
“include”: [“src”],
“exclude”: [“node_modules”, “dist”, “public”]
}
简单搭建 Koa 服务器
?
1
2
3
4
5
# 依赖安装
yarn add koa
yarn add typescript -D
# 依赖注解
yarn add @types/koa -D
再app.ts中实例化一个服务器。
?
1
2
3
4
5
6
7
8
import Koa, { DefaultContext, DefaultState, Context } from Koa
const app: Koa<DefaultState, DefaultContext> = new Koa()
app.use(async (ctx: Context) => {
ctx.body = coderlzw
})
app.listen(3000, () => {
console.log(服务启动成功，running http://127.0.0.1:3000)
})
再package.json中添加调试脚本：
?
1
2
3
“scripts”: {
“dev”: “ts-node-dev –respawn app.ts”
}
启动服务：
现在，我们使用Koa和TypeScript搭建了一个简单的服务器，我们http://127.0.0.1:3000便可以再浏览器中看到”coderlzw“
完整项目搭建
依赖安装
?
1
2
3
4
5
# 依赖安装
yarn add koa koa-router koa-cors koa-bodyparser dotenv
yarn add ts-node-dev npm-run-all typescript -D
# 依赖注解
yarn add @types/koa @types/koa-bodyparser @types/koa-router @types/koa-cors -D
dotenv是一个零依赖的模块，它能将环境变量中的变量从.env文件加载到process.env中。
在根目录下创建.env文件
在*.js/*.ts中使用
?
1
2
3
import dotenv from dotenv
dotenv.config()
const { PORT, HOST } = process.env
npm-run-all是一个批量执行npm脚本的工具。
构建目录结构
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
service
├─ package.json
├─ src
│ ├─ app
│ ├─ config
│ ├─ constants
│ ├─ controller
│ ├─ main.ts
│ ├─ middleware
│ ├─ router
│ ├─ service
│ └─ utils
├─ .env
├─ tsconfig.json
└─ yarn.lock
修改 package.json
?
1
2
3
4
5
6
7
8
{
“script”: {
“dev”: “tsnd –respawn src/main.ts”,
“build”: “npm-run-all resetFolder compile”,
“compile”: “tsc”, // 编译typescript
“resetFolder”: “rimraf dist/*” // 清空dist文件夹
}
}
当我们在开发环境的时候，只需要执行yarn dev即可成功启动服务。
当我们执行编译打包的时候，根据tsconfig.json中的配置输出到指定的目录。
在项目部署后，我们只需要运行dist/main.js文件即可启动服务。
代码规范
eslint
官网: eslint.bootcss.com
eslint能够帮助我们规范编码，比如字符串使用哪种引号，代码结尾是否要有分号等等。
安装依赖包
使用如下命令初始化eslint配置，会在项目更目录生成.eslintrc.js配置文件。
接着我们在命令行执行：npx eslint src/** –fix，执行eslint提供的代码的自动修复。
修改package.json，添加运行脚本。
?
1
2
3
“scripts”: {
“lint”: “eslint src/** –fix”, // 使用eslint规则格式化代码
}
现在我们可以通过命令来处理代码风格问题，但是我们更加希望在保存的时候自动处理代码分格，这时候就需要使用到vscode编辑器的插件ESLint，通过此插件和vscode编辑器配置便可以实现保存的时候自动格式化代码。
?
1
2
3
4
// vscode 配置自动格式化
“editor.codeActionsOnSave”: {
“source.fixAll”: true
}
现在我们通过如上的配置，在保存的时候就会自动处理代码风格问题。
prettier
前面所提到的eslint主要做两件事情，一是修复代码质量，二是修改代码分格。
如果你不喜欢eslint自带的格式化方式，就可以使用prettier来格式化代码分格。
官网: prettier.io/
?
1
2
yarn add prettier -D
复制代码
在项目更目录下配置.prettierrc
?
1
2
3
4
5
6
7
8
9
{
“useTabs”: false,
“tabWidth”: 2,
“printWidth”: 100,
“singleQuote”: true,
“trailingComma”: “none”,
“bracketSpacing”: true,
“semi”: false
}
在项目更目录运行如下命令，格式化项目所有文件。
但是当我们执行完后，会发现eslint又报错了。这是因为eslint和prettier的冲突所导致的。这时候我们需要关闭prettier与eslint格式所产生的冲突。
?
1
yarn add eslint-config-prettier -D
然后在.eslintrc.js加入perttier扩展，配置后冲突的问题就解决了，代码分格就由prettier来处理。
?
1
extends: [standard, prettier]
现在我们希望在保存的时候按照prettier的代码分格格式化代码。eslint-plugin-prettier
?
1
yarn add eslint-plugin-prettier -D
eslintrc.js的最终配置如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [standard, plugin:prettier/recommended], // 修改此处
parser: @typescript-eslint/parser,
parserOptions: {
ecmaVersion: latest,
sourceType: module
},
plugins: [@typescript-eslint],
rules: {
camelcase: 0 // 驼峰命名
}
}
最后，实现了一个小案例：gitee.com/coderlzw/ko…
到此这篇关于使用 Koa + TS + ESLlint 搭建node服务器的文章就介绍到这了,更多相关node服务器搭建内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://juejin.cn/post/7102367772100788260
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。
