使用 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访问ActiveX对象,以操作Access数据库为例。
Dec 15 NodeJs
Nodejs Post请求报socket hang up错误的解决办法
Sep 25 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
nodejs服务搭建教程 nodejs访问本地站点文件
Apr 07 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
nodejs超出最大的调用栈错误问题
Dec 27 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
nodejs检测因特网是否断开的解决方案
Apr 17 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 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递归函数返回值使用方法
2013/02/18 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP生成器简单实例
2015/05/13 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
python爬虫基本知识
2018/03/05 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
急诊科护士自我鉴定
2013/10/14 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
成绩单公证书
2014/04/10 职场文书
公证书样本
2014/04/10 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
治庸问责工作总结
2015/08/11 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL