我司由于业务调整需要重新对现有的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 app.ts
tsconfig.json如下
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"lib": ["es2016", "esnext.asynciterable"],
"outDir": "dist",
"rootDir": "src",
"strict": true,
"esModuleInterop": true,
}
}
大型项目,需要 多人开发的情况下,规约很重要,那么prettier和eslint 就必须要有..
eslint 配合 prettier 的配置如下 具体的可以在官网去看看相应的配置
.prettierrc.js
module.exports = {
semi: true,
trailingComma: "none",
singleQuote: true,
printWidth: 80,
tabWidth: 2
}
接着到.eslintrc.js
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"
},
};
其实到这里,基本上
在package.json 的script里添加两条命令就可以进行开发了
"dev": "nodemon --ext js,ts --exec 'npm run lint:dev && ts-node src/main.ts'",
"lint:dev": "eslint './src/**/*.ts'"
ts-node每次不会产生编译后的js文件,而是把它们丢到内存里, 随着结束进程就销毁
因此,eslint 可能不会起作用对你的代码进行约束,因此你需要手动启动 eslint 然后通过了再 开始执行ts-node.因为 nodemon exec参数传进去的字符串可能有点问题,因此,你直接把eslint传进去不工作,所以写成一个命令即可.
那么大型的项目,需要调试,那你要设置断点. vscode设置断点这个玩意真是比较麻烦
打开项目,在左边那个dubug标签,你点击它然后会生成一个
通过vscode 的launch.json 去执行npm脚本
首先在 package .json中的scripts里加入以下代码
"debug":"nodemon --ext js,ts --exec node -r ts-node/register --inspect src/main.ts",
解释一下就是使用nodemon 然后进入调试模式(打好断点后) 接着执行debug模式
ts-node 本身不支持--inspect这个命令的,所以你需要用用原生的node然后引入ts-node 来编译ts -r就是--require的缩写然后开始
launch.json如下
{
"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来通信.
然后你就可以愉快地进一步搭建基础设施啦.
