其他
TypeScript和Nodemon终极设置!
学习如何设置TypeScript和Nodemon,以提高你的生产力并轻松开发!
设置TypeScript和Nodemon有时会有些棘手,在本文中,我将向你展示如何轻松设置TypeScript和Nodemon!
在此github仓库中找到本文的完整源代码。https://github.com/talohana/typescript-nodemon-ultimate-setup
创建一个示例项目
让我们从创建一个示例项目开始,我们将通过运行以下命令来完成:
mkdir typescript-nodemon-ultimate-setup
接下来,通过运行以下命令创建最小的npm packge:
npm init -y or yarn init -y
注意:为减少冗长性,在本文的其余部分中,我将使用npm并省略yarn命令
添加所需的依赖项:
npm i -D typescript ts-node nodemon @types/node
通过运行 npx tsc --init
初始化TypeScript
src/index.ts
文件,其中包含以下TypeScript。function greet(name: string): void {
console.log("Hello", name);
}
const readerName = "Medium Reader";
greet(readerName);
添加Nodemon
nodemon.json
。{
"restartable": "rs",
"ignore": [".git", "node_modules/", "dist/", "coverage/"],
"watch": ["src/"],
"execMap": {
"ts": "node -r ts-node/register"
},
"env": {
"NODE_ENV": "development"
},
"ext": "js,json,ts"
}
让我们来看一下配置:
restartable:我们可以用来手动重新启动程序的命令 ignore:不希望在更改时触发程序重新启动的文件列表 watch:更改时我们希望触发程序重新启动的路径列表 execMap:文件类型/扩展名与运行时之间的映射 env:要包含的环境变量 ext:Nodemon监视的文件扩展名
为了运行和调试我们的设置,请在 package.json
文件中添加两个脚本:
{
"scripts": {
"dev": "nodemon --config nodemon.json src/index.ts",
"dev:debug": "nodemon --config nodemon.json --inspect-brk src/index.ts"
}
}
dev:debug
脚本中增加了 --inspect-brk
标志,这告诉node停止程序的执行直到连接上调试器,这个可以换成--inspect
标志来调试而不停止。npm run dev
运行我们的程序,试着修改一些东西,就可以看到程序用更新的代码重新运行。这个难题的最后一步是添加VSCode调试配置。
创建包含以下配置的 .vscode/launch.json
文件:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"restart": true,
"processId": "${command:PickProcess}"
}
]
}
npm run dev:debug
启动nodemon时,程序会停止,直到我们连接到它:附加VSCode后,它将在代码的第一行停止,你可以轻松调试程序!
更多文章
微软解析新Edge浏览器的多进程体系结构 cURL简介:高级程序员都在用的工具 8个JavaScript库可更好地处理本地存储 Google搜索的10个小技巧,部分适用于百度 引入适用于双屏和可折叠设备的Web API 听说你熟练使用Vue.js,这9种Vue技术你掌握了吗? 在Vue Vite应用程序中实现暗/亮模式 2020 开发人员生态系统现状
粉丝福利 114期留言中奖用户:CCC,恭喜!请找我领红包5元红包,过期不候。 临走前留下,今天的福利 福利1:《Web安全从入门到“放弃”》视频教程 获取地址和密码请在公众号中回复关键字:003 福利2:在看+留言,张张会在留言区随机抽取一位认真留言的小伙伴,给他发一个红包奖励
- END -
走心的分享更容易被抽中~
开奖时间 下期文末
点赞 + 在看 + 留言
下一个幸运儿就是你
👇