2023年7月7日发(作者：)

vscode搭建nodemon+ts+ts-node的开发环境我司由于业务调整需要重新对现有的web portal 进⾏开发.现有的portal 存在10年并且承载了⼤量业务,⾥⾯有jq,knockout和angularjs 还有react 15和16 简直就是⼀个前端发展史有没有.那么这么复杂的业务逻辑的dashboard开发必然要ts如何初始化⼀个npm项⽬和这⾥不再细说在server 下安装依赖包$ npm install --save-dev ts-node nodemon typescript

在之前nodejs 不⽀持es6语法的时候,有⼀个东西叫babel-node, 就是如果熟悉的⼈⼀定知道,就是⽤来代替node 命令来运⾏由es6语法编写⽽成的nodejs 服务.基本⽤法$ ts-node 如下{ "compilerOptions": { "target": "es2016",

"module": "commonjs",

"lib": ["es2016", "terable"],

"outDir": "dist",

"rootDir": "src",

"strict": true,

"esModuleInterop": true,

}}⼤型项⽬,需要 多⼈开发的情况下,规约很重要,那么prettier和eslint 就必须要有..eslint 配合 prettier 的配置如下 具体的可以在官⽹去看看相应的配置.s = { semi: true, trailingComma: "none", singleQuote: true, printWidth: 80, tabWidth: 2}接着到. parser: '@typescript-eslint/parser', extends: [ 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', 'plugin:prettier/recommended', ], parserOptions: { ecmaVersion: 2016, sourceType: 'module', }, rules: { // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/interface-name-prefix": "off" },};其实到这⾥,基本上在 的script⾥添加两条命令就可以进⾏开发了"dev": "nodemon --ext js,ts --exec 'npm run lint:dev && ts-node src/'","lint:dev": "eslint './src/**/*.ts'"ts-node每次不会产⽣编译后的js⽂件,⽽是把它们丢到内存⾥, 随着结束进程就销毁因此,eslint 可能不会起作⽤对你的代码进⾏约束,因此你需要⼿动启动 eslint 然后通过了再 开始执⾏ts-node.因为 nodemon exec参数传进去的字符串可能有点问题,因此,你直接把eslint传进去不⼯作,所以写成⼀个命令即可.那么⼤型的项⽬,需要调试,那你要设置断点. vscode设置断点这个玩意真是⽐较⿇烦打开项⽬,在左边那个dubug标签,你点击它然后会⽣成⼀个通过vscode 的 去执⾏npm脚本⾸先在 package .json中的scripts⾥加⼊以下代码"debug":"nodemon --ext js,ts --exec node -r ts-node/register --inspect src/",解释⼀下就是使⽤nodemon 然后进⼊调试模式(打好断点后) 接着执⾏debug模式ts-node 本⾝不⽀持--inspect这个命令的,所以你需要⽤⽤原⽣的node然后引⼊ts-node 来编译ts -r就是--require的缩写然后开始如下{ "version": "0.2.0", "configurations": [ { "type": "node2", "request": "launch", "name": "Launch Program", "runtimeExecutable": "npm", "runtimeArgs": [ "run", "debug" ], "cwd": "${workspaceRoot}/server", "port": 9229, "console":"intergratedTerminal", "sourceMaps": true } ]}这样就万事⼤吉了,然后你可以直接启动,debug会⾃动监听9229 这个端⼝,因为你--inspect后,debugger就会挂载在你的应⽤程序⾥,通过websocket来通信.然后你就可以愉快地进⼀步搭建基础设施啦.