使用 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教程之入门
Nov 21 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
nodeJS实现简单网页爬虫功能的实例(分享)
Jun 08 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 NodeJs
nodejs使用express获取get和post传值及session验证的方法
Nov 09 NodeJs
Nodejs让异步变成同步的方法
Mar 02 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 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 全文搜索和替换的实现代码
2008/07/29 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
PHP基础知识回顾
2012/08/16 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jquery延迟对象解析
2016/10/26 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
python 输出一个两行字符的变量
2009/02/05 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python温度转换实例分析
2018/01/17 Python
Django组件content-type使用方法详解
2019/07/19 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
年检委托书
2014/08/30 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
css样式important规则的正确使用方式
2022/06/10 HTML / CSS