出于某些原因,近期开始需要在公司推广使用nodejs写服务端,因为之前使用es6开发过多个个人项目,所以知道新手开发node非常容易将代码写的散乱并且不易后人理解。本人刚入行的时候做的是java,觉得强类型的语言更加适合组织代码和团队合作,而且强类型语言因为类型强制声明,所以IDE可以做到很好的代码感知能力,因为有IDE的撑腰,所以开发大型系统,复杂系统比较有保障。所以折中的选择了typescript开发,也就用起了vsc(visual studio code)。
无论什么语言什么项目,总得搭建起一个足够高效可以让自己开心的写代码的开发环境(还是叫开发流程?不知道怎么描述了,词穷),以下是我对typescript开发流程的最低要求:
typescript代码在我保存文件时自动编译
编译完成之后自动重启服务
可以直接在typescript代码上打断点调试
最终效果:
大家也看到了用的就是gulp+vsc内置的debug工具(使用attach模式),用到的gulp插件列表:
先附上我的目录结构:
使用gulp任务编译ts文件
最最基础的肯定是编译ts文件了,这里用到的就是gulp-typescript和gulp-sourcemaps(用于生成映射),详细的使用方法和可配置项可以直接点上面的链接进去看,这里我们需要根据tsconfig.json里的配置进行编译,tsconfig.json都差不多的,我这里贴下我的。
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"includes": [
"src/**/*"
]
}
需要注意的地方就是为了调试ts代码的时候映射到编译后的文件上,sourceMap必须要开启,outDir也必须要指向正确的目录。
然后就开始编写gulp任务了,也是比较简单的,就需要注意下这些流的顺序
var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('compile', function () {
return tsProject.src()
// 注意顺序
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
这样我们在命令行运行gulp compile的时候,就会生成js文件了,打开js文件,在文件最下方也会有用于sourcemap的url,如果需要生成.map文件的话需要传递一个相对路径给.write方法:
var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(plugin1())
.pipe(plugin2())
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('dist'));
});
监听文件变更自动编译并重启服务
要实现这个功能就要使用到gulp-nodemon这个插件了,详细的使用方法也直接点上面链接看就行了,这个东西踩过几个坑需大家注意一下下面注释的内容。这个也就是最后的gulpfile了
var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var nodemon = require('gulp-nodemon');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('compile', function () {
return tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
gulp.task('watch', ['compile'], function () {
return nodemon({
script: 'dist/bin/www.js', // 服务的启动文件
watch: 'src', // 源代码目录
tasks: ['compile'], // 在重启服务前需要执行的任务
ext: 'ts', // 监听.ts结尾的文件 必须
// 设置环境
env: {
'NODE_ENV': 'development'
},
// 必须开启debug模式
exec: 'node --debug'
});
});
当然啦,你也可以使用vsc里面task的功能,把他集成到vsc里面去,参考这个去做就行了,因为我用的是mac,直接把终端拖到另一个屏幕去了,要看输出内容的时候直接划一下就行,所以没有使用这个功能。
使用vsc进行代码调试
这里使用的是attach模式进行调试,也就是由nodemon --debug来启动服务,并提供出一个debug的端口,然后我们用vsc接入进行调试。
点击进入debug菜单
然后点击
生成debug的配置文件(launch.json),这里提供下我配置好的,使用的时候注意把那些注释删掉。
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"type": "node", // 必须为node,不能为node2
"request": "attach",
"port": 5858, // 为node debug模式的端口号,默认为5858
"address": "localhost",
"restart": true, // 配合nodemon使用
"sourceMaps": true, // 开启了sourcemap
"outDir": "${workspaceRoot}/dist", // 输出目录
"outFiles": [],
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
然后点击
就可以了,注意要先运行gulp watch命令。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。