nodemon实现Typescript项目热更新的示例代码


Posted in Javascript onNovember 19, 2019

我们都知道nodemon可以直接用来在开发环境下运行js文件,可以在文件改变时自动刷新和重启服务器。但是最近刚好在学typescript,所以就想使用ts来写,也想达到同样的效果,总结一下方法,大概有如下几种:

nodemon+tsc:

这个方法很简单,首先通过tsc将我们的ts文件编译到dist目录下,然后再通过nodemon直接运行dist目录下的文件即可。至于ts的输出目录相关配置可在tsconfig.js中设置。

tsc && nodemon --watch dist/index.js

但是这种方式有个缺点,就是nodemon只监听了dist目录,可能有时候你修改了源码并不能触发热更新,另外还有个问题就是多了一个dist目录中转,感觉不爽。

nodemon+ts-node:

命令如下:

nodemon -e ts,tsx --exec ts-node ./index.ts"

大概意思就是监听文件增加ts、tsx两种文件类型,使用ts-node运行index.ts文件。

当然,上述参数是设置在命令行中的,也可以在nodemon.json中设置:

{
 "verbose": false,
 "debug": false,
 "exec": "ts-node ./index.ts",
 "ignore": [
  "mochawesome-report",
  "node_modules",
  "./test",
  "**/*.d.ts",
  "*.test.ts",
  "*.spec.ts",
  "fixtures/*",
  "test/**/*",
  "docs/*"
 ],
 "events": {
  "restart": ""
 },
 "watch": ["./app", "./configs", "./app.ts"],
 "ext": "ts tsx",
 "inspect": true
}

如果有使用到tsx文件,记得在tsconfig.json文件中将jsx取消注释,否则编译时可能会提示错误。

除了上述两种方法,今天无意中试了下直接使用nodemon来执行ts文件,发现控制台报错了,原谅我是个英语渣,不明白具体说了什么,但是看到了ts-node的身影,果断安装ts-node再试,竟然成功了。

nodemon ./index.ts

但是这样修改了ts文件不会热更新,可以在nodemon.json文件中将ext属性添加上ts就可以了。

{
 "restartable": "rs",
 "ignore": [".git", "node_modules/**", "client/*", "dist", ".cache", "logs"],
 "verbose": true,
 "execMap": {
  "": "node",
  "js": "node --harmony"
 },
 "events": {
  "start": "",
  "crash": "",
  "exit": "",
  "restart": ""
 },
 "ext": "js json ts tsx",
 "watch": ["./**"],
 "env": {
  "NODE_ENV": "development",
  "PORT": "3002"
 },
 "legacy-watch": false
}

当然除了上述方式,还可以使用构建工具来进行处理,如webpack,parcel等,当然如果大家有其他好的建议,欢迎交流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
js实现微博发布小功能
Jan 12 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue的三种图片引入方式代码实例
Nov 19 #Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 #Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python对Excel的读取的示例代码
2020/02/14 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python把一个字符串切开的实例方法
2020/09/27 Python
求职信写作要突出重点
2014/01/01 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
户外活动总结
2015/02/04 职场文书
教师党员个人总结
2015/02/10 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python