使用TS来编写express服务器的方法步骤

1. 前言

作为前端开发人员而言,ts已经成为了一项必不可少的技能,类型检查可以帮助我们再开发时避免一些不必要的bug,而且ts支持的类和装饰器等语法也更逼近后端语言,更适合服务器的开发。
本文将从零开始,搭建一个集成ts和eslint语法检查的express服务器。

2. 初始化express框架

我们可以使用官方提供的express生成器来快速生成express框架。
当然,express的初始化内容并不复杂,你也可以从一个app.js开始搭建自己喜欢的框架模式。

# 使用express生成器之前必须全局安装过express-generator
$ npm install -g express-generator

# --view后面是确定你使用哪种视图引擎,server是你工程的名称
$ express --view ejs server

# 生成的工程并不会默认给我们添加git,这里我们使用git init初始化一下
$ git init

初始化完成后我们添加一个.gitignore文件

node_modules/
dist/

3. 添加TS支持

全局安装TS

ts本身属于js的超集,node和浏览器并不认识,执行前需要先编译成js,所以没有全局安装过ts的需要先全局安装一下

$ npm install -g typescript

安装express类型依赖

express是基于node环境的,所以我们需要安装两个类型依赖,以获得相关api的类型提示

$ npm install @types/node --save-dev

$ npm install @types/express --save-dev

配置tsconfig.json文件

在项目根目录下新建tsconfig.json文件,outDir表示打包输出路径

{
 "compilerOptions": {
  "target": "es2016",
  "module": "commonjs",
  "lib": ["es2016","dom"],
  "outDir": "./dist",
 },
 "exclude": ["node_modules"]
}

这里如果包含了include或者files选项,将不会默认编译所有ts文件。

接下来我们可以把项目的所以js文件的后缀改为.ts,然后直接在命令行运行

$ tsc

默认会找到根目录下的tsconfig.json文件,按照配置帮我们进行编译,编译完成我们可以看到dist文件夹已经将所有ts文件编译成了js文件,而且保持了原来的目录结构。

接下来我们将目录下的其他资源也放入dist文件夹下,然后运行

$ node ./dist/bin/www

这时我们的服务已经可以正常启动了,但是在开发时如果每次运行都要进行编译->将资源文件移入->运行命令的流程,那也太繁琐了,所以接下来我们再添加一个第三方库ts-node。

使用ts-node将ts文件编译在内存中

在使用ts-node之前需要进行全局安装

$ npm install ts-node -g

# 用ts-node直接运行项目,这个库会将我们的ts文件编译成js文件保存在内存中进行引用
$ ts-node ./bin/www

虽然ts-node可以帮我们直接运行ts文件,但在开发完成后部署在生产环境时,还是推荐使用tsc打包出来的js文件会更加稳定。

使用nodemon进行热更新

全局安装nodemon

$ npm install nodemon -g

# 执行命令运行项目
$ nodemon -e ts --exec ts-node ./bin/www

-e:表示指定观察列表 (Specifying extension watch list)
--exec:代表命令行形式执行命令

配置npm脚本

"scripts": {
 "start": "ts-node ./bin/www",
 "dev": "nodemon -e ts --exec ts-node ./bin/www",
 "build": "tsc",
 "server": "node ./dist/bin/www"
}

4. 配置eslint

为什么不是tslint?

TSLint is deprecated.
See this issue for more details: Roadmap: TSLint → ESLint. If you're interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.

这是tslint团队给出的答案,目前推荐使用的是typescript-eslint

为项目配置eslint

# 未全局安装的需要全局安装
$ npm install eslint -g

$ eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=7.11.0 eslint-plugin-import@>=2.22.1 eslint-plugin-node@>=11.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.2 @typescript-eslint/parser@latest
√ Would you like to install them now with npm? · Yes

关于eslint初始化的步骤还是比较简单易懂的,这里不展开叙述,关键一条:Does your project use TypeScript? · Yes

使用eslint命令行初始化后的项目还并没有开启对于ts相关语法的检查,这里需要在.eslintrc.js文件增加两条配置

extends: [
 'standard',
 'eslint:recommended',
 'plugin:@typescript-eslint/recommended'
]

接下来我们会看到ts文件的一堆报错,就可以愉快的安装ts语法进行修改啦!

提示:ts对于commonjs的模块化语法并没有完全的支持,所以在使用require和module.exports时很容易遇到各种报错,官方也

推荐了一些解决方式,这里推荐启用ES模块导入模式

{
 "compilerOptions": {
 ...
  "esModuleInterop": true
 }
}

这样就可以在项目中使用es6的import和export进行模块化了,ts在编译时会根据环境对我们的代码进行兼容性编译。

5. 小结

本文是本人在搭建自己express服务器并集成ts开发时所记录的一些操作,如有错误之处,还请多多指点!

到此这篇关于使用TS来编写express服务器的方法步骤的文章就介绍到这了,更多相关TypeScript  express服务器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Express与NodeJs创建服务器的两种方法

    目录 NodeJs创建Web服务器 Express创建Web服务器 NodeJs创建Web服务器 var http = require('http'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.write('hello world!'); res.end(); }).listen(80); 这是一个原生式的创建一个we

  • node通过express搭建自己的服务器

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是摸着石头的过河,文中有什么不足不处欢迎指出. 安装express框架 传送门: express官方 然后介绍一下需要引入的中间件,node本身提供了一些库.我们可以直接通过require去引用,对于未提供的库,我们也可以通过手动npm去安装 var fs = require('fs'); 操作文件模

  • node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文件等,就可以在浏览器中访问了 var express = require("express"); var path = require("path"); var app = express(); //目录 (当前目录下的www_root目录) app.use(expre

  • 把vue-router和express项目部署到服务器的方法

    - 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000 有写的路由为/的页面,如图 此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行,启动成功 这是路径为/的页面 在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功,我们现在就要放到服务器上. - 准备工作 此前服务器

  • nodejs express配置自签名https服务器的方法

    在nodejs中使用express来搭建框架可以说是非常的简单方便,但是一般默认创建的都是http服务器,也就是只能通过http协议进行访问.如今https已经是发展趋势,我们应该顺应时代的潮流.在本篇文章中,我们将会来使用自签名的方式创建证书,然后使用express框架来搭建https服务器,最后让浏览器或者客户端使用https协议进行访问. 首先我们要生成证书文件: (1)生成私钥key文件(下面的pathway表示你要保存的文件路径位置) openssl genrsa 1024 > /pa

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • node.js的Express服务器基本使用教程

    前言 Express 是一个node.js Web框架,提供强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.他可以让前端工程师做后端的事,与数据库交互,可以通过向模板传递参数来动态渲染 HTML 页面. 初学者使用express可以快速的搭建一个Web项目,express中已经集成了Web的http服务器创建.请求和文件管理以及Session的处理等功能,所以express是非常适合初学者的入门学习. 使用教程 安装前需系统配置Node.js环境,然后使用Npm安装Express

  • 使用express搭建一个简单的查询服务器的方法

    本文介绍了使用express搭建一个简单的查询服务器的方法,分享给大家,具体如下: 使用到的技术栈有express.mysql. 项目结构: service --node_modules --app.js --query.js app.js支持调用服务,使用body-parser对request进行处理. query.js实现链接数据库以及查询数据库的功能. app.js代码如下: var express = require('express'); var query = require('./

  • 使用TS来编写express服务器的方法步骤

    1. 前言 作为前端开发人员而言,ts已经成为了一项必不可少的技能,类型检查可以帮助我们再开发时避免一些不必要的bug,而且ts支持的类和装饰器等语法也更逼近后端语言,更适合服务器的开发. 本文将从零开始,搭建一个集成ts和eslint语法检查的express服务器. 2. 初始化express框架 我们可以使用官方提供的express生成器来快速生成express框架. 当然,express的初始化内容并不复杂,你也可以从一个app.js开始搭建自己喜欢的框架模式. # 使用express生成

  • IDEA使用Docker插件远程部署项目到云服务器的方法步骤

    1. 打开2375端口 编辑docker.service vim /lib/systemd/system/docker.service 在 ExecStart 后添加配置 -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock 重启docker网络和docker systemctl daemon-reload systemctl restart-docker Centos7 开放端口 firewall-cmd --zone=public --add

  • Vue项目打包部署到apache服务器的方法步骤

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

  • Vue-CLI3.x 自动部署项目至服务器的方法步骤

    目录 前言 一 安装scp2 二.配置测试/生产环境 服务器SSH远程登陆账号信息 三.使用scp2库,创建自动化部署脚本 四.添加 package.json 中的 scripts 命令, 自定义名称为 "deploy", 结束语 前言 平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 xftp 上传到服务器上,整个流程感觉稍有繁琐,重

  • 利用apache ftpserver搭建ftp服务器的方法步骤

    目录 操作环境: 一.usermanager采用文件形式管理xml示例如下 二.usermanager采用mysql数据库管理用户时,ftpd-mysql.xml示例如下 三.usermanager采用Sqlite数据库管理用户时,ftpd-sqlite.xml示例如下 四.解决ftpd.exe在64位windows系统启动失败的问题 五.python操作sqlite的ftp.db管理(增加删除)用户 操作环境: win2012r2 x64 datacenter Apache FtpServer

  • scrapy爬虫部署服务器的方法步骤

    目录 一.scrapy爬虫部署服务器 1.scrapyd 2.安装 2.scrapy-client 3.scrapydweb(可选) 二.实际操作(一切的操作都在scrapyd启动的情况下) 三.数据展示 四.问题与思考 五.收获 一.scrapy爬虫部署服务器 scrapy通过命令行运行一般只用于测试环境,而用于运用在生产环境则一般都部署在服务器中进行远程操作. scrapy部署服务器有一套完整的开源项目:scrapy+scrapyd(服务端)+scrapy-client(客户端)+scrap

  • 从0开始简单部署腾讯云服务器的方法步骤

    由于是第一次发帖,如有写得不好,不对的地方希望大家在评论里指出,以后改进.谢谢!!!. 下面开始: 一:购买腾讯云: 首先进入腾讯云的官网:https://cloud.tencent.com/?fromSource=gwzcw.150044.150044.150044  注册后进行认证. 认证完了后选择 产品 - 云服务器 .如下图: 大家可按照自己的需要进行选择.我这里的话选择的是Windows 2008 便于操作. 如果大家只是想着弄来玩两天的话,腾讯有一个新用户15天的服务器体验活动,只需

  • 利用nginx搭建静态资源服务器的方法步骤

    以windows为例,linux其实一样: 搭建静态资源服务器 我电脑上的work文件夹下面有很多图片,我想通过nginx搭建静态资源服务器,通过在地址栏输入ip+port的方式完成目录的映射 找到nginx安装目录,打开/conf/nginx.conf配置文件,添加一个虚拟主机 添加监听端口.访问域名 重点是添加location, 映射-URL:/work/; 注意:如果当前server模块中已有一个location且URL为"/",那么新建的location的url应为匹配路径,不

  • Go语言利用ssh连接服务器的方法步骤

    学习了Go语言后,打算利用最近比较空一点,写一个前端部署工具,不需要每次都复制粘贴的麻烦,需要完成部署的第一步就需要连接远程服务器 打开 ssh server 首先我们想要利用ssh连接服务器的前提是服务器打开了ssh server,ssh 分为client和server端 ,如果打开了client可以连接远程服务器,打开了server就可以被连接. 因为linux网上教程很多,windows比较少,所以这里只写windows版本的, 首先我们一般用Open SSH这个工具打开服务,window

  • nginx搭建NFS服务器的方法步骤

    目录 简介 什么是nfs服务器? 为什么需要nfs服务器 nfs服务器是否是最佳的解决方法 nfs的优点和缺点 RPC 搭建NFS服务器 安装nfs 挂载 简介 什么是nfs服务器? NFS(Network File System)即网络文件系统,它最大的功能就是可以通过网络,让不同的机器.不同的操作系统可以共享彼此的文件,使用者访问网络上别处的文件就像在使用自己的计算机一样. 为什么需要nfs服务器 到同一个地方拿数据,保障网站数据的一致性,不管负载均衡器将请求分配到哪台后端的服务器,客户机看

随机推荐