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

目录
  • 初始化项目
  • 环境准备
    • 安装环境
  • 初始化 tsconfig.json
  • 简单搭建 Koa 服务器
  • 完整项目搭建
    • 依赖安装
    • 构建目录结构
    • 修改 package.json
    • 代码规范
    • eslint
    • prettier

初始化项目

环境准备

与之前使用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"
}

启动服务:

现在,我们使用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

修改 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中的配置输出到指定的目录。

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

代码规范

eslint

官网: eslint.bootcss.com

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

  • 安装依赖包

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

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

修改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服务器的文章就介绍到这了,更多相关node服务器搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用node.js搭建服务器

    使用node搭建小型服务器(其实就是分析url然后输出文件给客户端) 最近需要完成一个课程设计,被项目经理(组长)分配写界面,但是总觉得只写前端的话缺了点什么,所以想自己写下后端玩一下. 期间还稍微纠结了一下用什么语言,本来打算正好学习一下PHP,可后来转念一想,用nodejs岂不美哉,不仅了解了后台开发,也相当于巩固了js基础,一举两得,美滋滋. 在学习node的过程中,学到了使用node实现一个服务器这一块,感觉是对前面所学模块的一个很好的总结.用到了四个基本的模块fs stream htt

  • nodejs搭建本地服务器轻松解决跨域问题

    最近把以前用jquery写的一个小demo拿出来运行的,刚开始的时候忘了开启本地服务导致控制台一直报XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%22lcl@qq.com%22,%22pwd%22:%22Home20170702%22}. Cross origin requests are only supported for protocol schemes:

  • 基于Node.js的http模块搭建HTTP服务器

    目录 http 模块 代码剖析 request 解析 URL 解析 请求体解析 response 设置 发送 http 请求 GET POST 诡异之处 当你第一次接触工程化的项目时,看到项目控制台正在 building,过一会突然跳出一个 URL 地址,你点开它居然是你刚写好的网页,好神奇. 当你接后端同伴的接口时,你把数据带去,接口竟然给你返回 500 错误:你去找后端,后端说这样传不行,你不知道为啥不行,反正按照他说的改完,返回 200 成功了. 有时候你的请求莫名其妙的就跨域了,后端说让

  • 浅谈使用nodejs搭建web服务器的过程

    使用 Node 创建 Web 服务器 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客户端的网络浏览器配合. 大多数 web 服务器都支持服务端的脚本语言(php.python.ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器. 目前最主流的三个Web服务器是Apache.Nginx.IIS. Node.js 提供了 htt

  • nodejs搭建本地服务器并访问文件的方法

    安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html> <html lang="en"> <head>

  • 使用node-media-server搭建一个简易的流媒体服务器

    记录一下使用node-media-server的一些过程.本文章环境为windows.本文章适合初学者. 使用到的东西:nodeJs.ffmpeg.node-media-server. 这里说一点(如果有错欢迎指出): node-media-server是作为流媒体服务器,你可以把他理解为中转站,用于转换流格式或者对视频流做一些操作以及向外推送流地址. ffmpeg是作为推流工具,将你需要转换的视频或者视频流推流到流媒体服务器中. 拉流的意思是从流媒体服务器上拉去视频流,观看者通过拉取流媒体服务

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

    目录 初始化项目 环境准备 安装环境 初始化 tsconfig.json 简单搭建 Koa 服务器 完整项目搭建 依赖安装 构建目录结构 修改 package.json 代码规范 eslint prettier 初始化项目 环境准备 与之前使用JavaScript 开发后台不同,区别如下: 自动编译运行的插件由nodemon替换为ts-node-dev. 在TypeScript环境下,需要使用到ES6模块化规范.而非CommonJS规则. 使用TypeScript语法进行开发,再开发结束后,需要

  • Springcould多模块搭建Eureka服务器端口过程详解

    这篇文章主要介绍了Springcould多模块搭建Eureka服务器端口过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1创建一个普通父maven 在pom修改为因为spring could依赖spring boot所以首先在父maven <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-star

  • nginx搭建图片服务器的过程详解(root和alias的区别)

    安装过程略(我是直接用 yum -y install nginx; 安装的). 启动 启动(重启)nginx,以下2个命令都可以: systemctl restart nginx; # 注:这里的nginx不是目录,是cd不进去的 /usr/sbin/nginx -s reload; 一般不报错就是启动成功. 页面验证nginx是否启动 浏览器输入ip,返回centos页面,这不对吧? 看下配置文件: root /usr/share/nginx/html; 该目录下的index.html 内容就

  • 使用Docker搭建MQTT服务器的过程详解

    1. 拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/synbop/emqttd:2.3.6 2. 运行镜像 –name 名字 -p 18083 服务器启动端口 -p 1882 TCP端口 -p 8083 WS端口 -p 8084 WSS端口 -p 8883 SSL端口 -d 指定容器 docker run --name emq -p 18083:18083 -p 1883:1883 -p 8084:8084 -p 8883:8883 -p

  • pm2与Verdaccio搭建私有npm库过程详解

    目录 前言 一般私有化的npm仓库有以下几种方法实现: 下面对各个方案进行一个粗浅的对比: 为什么选用Verdaccio? 安装 修改配置 配置文件 权限把控 部署 docker部署 pm2部署 管理npm仓库源 npm包发布 注册 登录 发布 删除 前言 最近开会的时候讨论到前端组件库搭建,因为需要多人协作,使用npm link等都比较麻烦,且当业务规模较大了之后,我们一般会有自己的脚手架,自己的全局工具包等等.其中可能包含了自身的业务代码不能公开,因此我们都需要一个私有化的npm仓库. 一般

  • 基于docker 搭建Prometheus+Grafana的过程详解

    一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活跃,他们便将它独立成开源项目,并且有公司来运作.Google SRE的书内也曾提到跟他们BorgMon监控系统相似的实现是Prometheus.现在最常见的Kubernetes容器管理系统中,通常会搭配Prometheus进行监控. Prometheus基本原理是通过HTT

  • Elasticsearches的集群搭建及数据分片过程详解

    目录 Elasticsearch高级之集群搭建,数据分片 广播方式 单播方式 选取主节点 什么是脑裂 错误识别 Elasticsearch高级之集群搭建,数据分片 es使用两种不同的方式来发现对方: 广播 单播 也可以同时使用两者,但默认的广播,单播需要已知节点列表来完成 广播方式 当es实例启动的时候,它发送了广播的ping请求到地址224.2.2.4:54328.而其他的es实例使用同样的集群名称响应了这个请求. 一般这个默认的集群名称就是上面的cluster_name对应的elastics

  • nginx搭建jsdelivr镜像站过程详解

    目录 创建 jsdelivr 镜像站 使用 jsdelivr 镜像站 ​最近 jsdelivr 可谓国内站长圈的头条常客,这不,又双叒叕(yòu shuāng ruò zhuó)打不开了. 如何解决这个问题?最简单的方法当然是使用别人建立的jsd镜像站,但是稳定性和可靠性就只能看镜像站长的心情了吧.自己动手丰衣足食,还是自己搞个镜像吧. 创建 jsdelivr 镜像站 首先,你需要有一台安装了 nginx 的服务器.推荐使用腾讯云轻量服务器的Matomo镜像,其中集成了最新稳定版 nginx.p

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • Java 用Prometheus搭建实时监控系统过程详解

    上帝之火 本系列讲述的是开源实时监控告警解决方案Prometheus,这个单词很牛逼.每次我都能联想到带来上帝之火的希腊之神,普罗米修斯.而这个开源的logo也是火,个人挺喜欢这个logo的设计. 本系列着重介绍Prometheus以及如何用它和其周边的生态来搭建一套属于自己的实时监控告警平台. 本系列受众对象为初次接触Prometheus的用户,大神勿喷,偏重于操作和实战,但是重要的概念也会精炼出提及下.系列主要分为以下几块 Prometheus各个概念介绍和搭建,如何抓取数据(本次分享内容)

随机推荐