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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python递归实现快速排序
2018/08/18 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python实现批处理文件
2020/07/28 Python
Python descriptor(描述符)的实现
2020/11/15 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
二年级数学教学反思
2014/01/21 职场文书
参观接待方案
2014/03/17 职场文书
党员自我对照检查材料
2014/08/19 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
机关保密工作承诺书
2015/05/04 职场文书
小学运动会入场词
2015/07/18 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技