使用 Koa + TS + ESLlint 搭建node服务器的过程详解


Posted in NodeJs onMay 30, 2022

初始化项目

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

环境准备

与之前使用JavaScript 开发后台不同,区别如下:

  • 自动编译运行的插件由nodemon替换为ts-node-dev
  • TypeScript环境下,需要使用到ES6模块化规范。而非CommonJS规则。
  • 使用TypeScript语法进行开发,再开发结束后,需要进行编译打包为JavaScript去运行。

安装环境

yarn global add ts-node-dev typescript

ts-node-dev:与nodemon功能类似,在修改代码之后,保存即可生效,无需手动重启。

# 例如
ts-node-dev src/app.ts

# 如果想要监听文件的改变需要加上 --respawn 参数
ts-node-dev --respaswn src/app.ts

# 使用简短的别名
tsnd --respawn src/app.ts

初始化 tsconfig.json

# 生成tsconfig.json
tsc --init

修改tsconfig.json如下:

{
	"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 服务器

# 依赖安装
yarn add koa
yarn add typescript -D
# 依赖注解
yarn add @types/koa -D

app.ts中实例化一个服务器。

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中添加调试脚本:

"scripts": {
  "dev": "ts-node-dev --respawn app.ts"
}

启动服务:

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

现在,我们使用KoaTypeScript搭建了一个简单的服务器,我们http://127.0.0.1:3000便可以再浏览器中看到”coderlzw“

完整项目搭建

依赖安装

# 依赖安装
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文件

    HOST=localhost
    PORT=3000
  • *.js/*.ts中使用

    import dotenv from 'dotenv'
    dotenv.config()
    const { PORT, HOST } = process.env

npm-run-all是一个批量执行npm脚本的工具。

构建目录结构

service
├─ package.json
├─ ?src
│   ├─ ?app
│   ├─ ?config
│   ├─ ?constants
│   ├─ ?controller
│   ├─ ?main.ts
│   ├─ ?middleware
│   ├─ ?router
│   ├─ ?service
│   └─ ?utils
├─ .env
├─ tsconfig.json
└─ yarn.lock

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

修改 package.json

{
	"script": {
		"dev": "tsnd --respawn src/main.ts",
		"build": "npm-run-all resetFolder compile",
		"compile": "tsc", // 编译typescript
		"resetFolder": "rimraf dist/*" // 清空dist文件夹
	}
}

当我们在开发环境的时候,只需要执行yarn dev即可成功启动服务。

当我们执行编译打包的时候,根据tsconfig.json中的配置输出到指定的目录。

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

在项目部署后,我们只需要运行dist/main.js文件即可启动服务。

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

代码规范

eslint

官网: eslint.bootcss.com

eslint能够帮助我们规范编码,比如字符串使用哪种引号,代码结尾是否要有分号等等。

  • 安装依赖包

    yarn add eslint -D
  • 使用如下命令初始化eslint配置,会在项目更目录生成.eslintrc.js配置文件。

    eslint --init

    使用 Koa + TS + ESLlint 搭建node服务器的过程详解

接着我们在命令行执行:npx eslint src/** --fix,执行eslint提供的代码的自动修复。

使用 Koa + TS + ESLlint 搭建node服务器的过程详解

修改package.json,添加运行脚本。

"scripts": {
    "lint": "eslint src/** --fix",		// 使用eslint规则格式化代码
 }

现在我们可以通过命令来处理代码风格问题,但是我们更加希望在保存的时候自动处理代码分格,这时候就需要使用到vscode编辑器的插件ESLint,通过此插件和vscode编辑器配置便可以实现保存的时候自动格式化代码。

// vscode 配置自动格式化
"editor.codeActionsOnSave": {
    "source.fixAll": true
 }

现在我们通过如上的配置,在保存的时候就会自动处理代码风格问题。

prettier

前面所提到的eslint主要做两件事情,一是修复代码质量,二是修改代码分格。

如果你不喜欢eslint自带的格式化方式,就可以使用prettier来格式化代码分格。

官网: prettier.io/

yarn add prettier -D
复制代码

在项目更目录下配置.prettierrc

{
	"useTabs": false,
	"tabWidth": 2,
	"printWidth": 100,
	"singleQuote": true,
	"trailingComma": "none",
	"bracketSpacing": true,
	"semi": false
}

在项目更目录运行如下命令,格式化项目所有文件。

npx prettier --write .

但是当我们执行完后,会发现eslint又报错了。这是因为eslintprettier的冲突所导致的。这时候我们需要关闭prettiereslint格式所产生的冲突。

yarn add eslint-config-prettier -D

然后在.eslintrc.js加入perttier扩展,配置后冲突的问题就解决了,代码分格就由prettier来处理。

extends: ['standard', 'prettier']

现在我们希望在保存的时候按照prettier的代码分格格式化代码。eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

eslintrc.js的最终配置如下:

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服务器的文章就介绍到这了!

NodeJs 相关文章推荐
nodejs创建web服务器之hello world程序
Aug 20 NodeJs
NodeJS创建基础应用并应用模板引擎
Apr 12 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
nodejs开发——express路由与中间件
Mar 24 NodeJs
3分钟快速搭建nodejs本地服务器方法运行测试html/js
Apr 01 NodeJs
nodejs multer实现文件上传与下载
May 10 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
详解IWinter 一个路由转控制器的 Nodejs 库
Nov 15 NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 NodeJs
nodejs连接mysql数据库及基本知识点详解
Mar 20 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 NodeJs
浅谈Node的内存泄露问题
May 06 #NodeJs
分享node.js实现简单登录注册的具体代码
Apr 26 #NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 #NodeJs
Node.js实现爬取网站图片的示例代码
NodeJs使用webpack打包项目的方法详解
Feb 28 #NodeJs
node快速搭建后台的实现步骤
nodejs利用readline提示输入内容实例代码
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php生成图片缩略图的方法
2015/04/07 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php实现每日签到功能
2018/11/29 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
2015年教研工作总结
2015/05/23 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Python类方法总结讲解
2021/07/26 Python
灵能百分百第三季什么时候来?
2022/03/15 日漫
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫