摘要:出于某些原因,近期开始需要在公司推广使用写服务端,因为之前使用开发过多个个人项目,所以知道新手开发非常容易将代码写的散乱并且不易后人理解。所以折中的选择了开发,也就用起了。
出于某些原因,近期开始需要在公司推广使用nodejs写服务端,因为之前使用es6开发过多个个人项目,所以知道新手开发node非常容易将代码写的散乱并且不易后人理解。本人刚入行的时候做的是java,觉得强类型的语言更加适合组织代码和团队合作,而且强类型语言因为类型强制声明,所以IDE可以做到很好的代码感知能力,因为有IDE的撑腰,所以开发大型系统,复杂系统比较有保障。所以折中的选择了typescript开发,也就用起了vsc(visual studio code)。
无论什么语言什么项目,总得搭建起一个足够高效可以让自己开心的写代码的开发环境(还是叫开发流程?不知道怎么描述了,词穷),以下是我对typescript开发流程的最低要求:
typescript代码在我保存文件时自动编译
编译完成之后自动重启服务
可以直接在typescript代码上打断点调试
最终效果:
大家也看到了用的就是gulp+vsc内置的debug工具(使用attach模式),用到的gulp插件列表:
gulp-nodemon
gulp-sourcemaps
gulp-typescript
先附上我的目录结构:
最最基础的肯定是编译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命令。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91102.html
摘要:感谢大神的免费的计算机编程类中文书籍收录并推荐地址,以后在仓库里更新地址,声音版全文狼叔如何正确的学习简介现在,越来越多的科技公司和开发者开始使用开发各种应用。 说明 2017-12-14 我发了一篇文章《没用过Node.js,就别瞎逼逼》是因为有人在知乎上黑Node.js。那篇文章的反响还是相当不错的,甚至连著名的hax贺老都很认同,下班时读那篇文章,竟然坐车的还坐过站了。大家可以很...
摘要:感谢大神的免费的计算机编程类中文书籍收录并推荐地址,以后在仓库里更新地址,声音版全文狼叔如何正确的学习简介现在,越来越多的科技公司和开发者开始使用开发各种应用。 说明 2017-12-14 我发了一篇文章《没用过Node.js,就别瞎逼逼》是因为有人在知乎上黑Node.js。那篇文章的反响还是相当不错的,甚至连著名的hax贺老都很认同,下班时读那篇文章,竟然坐车的还坐过站了。大家可以很...
摘要:这些优势,其实都是类型系统所带来的强类型语言所具有的开发优势,无论是在开发体验还是后期项目维护上,都要优于目前的。 大半夜的JavaScript Weekly发来贺电:TypeScript 2.0 Final Released! 没错,继Angular2发布之后,TypeScript今天也发布了2.0版本,这不禁让我浮想一番。如果要说TS和JS最明显的差别,我想一定是Type Syst...
摘要:不过,相对于静态类型检查带来的好处,这些代价是值得的。当然少不了的模块化标准,虽然到目前为止和大部分浏览器都还不支持它。本身支持两种模块化方式,一种是对的模块的微小扩展,另一种是在发布之前本身模仿的命名空间。有一种情况例外。 TypeScript 带来的最大好处就是静态类型检查,所以在从 JavaScript 转向 TypeScript 之前,一定要认识到添加类型定义会带来额外的工作量...
阅读 1223·2021-11-25 09:43
阅读 1336·2021-09-26 09:55
阅读 2330·2021-09-10 11:20
阅读 3365·2019-08-30 15:55
阅读 1441·2019-08-29 13:58
阅读 1163·2019-08-29 12:36
阅读 2337·2019-08-29 11:18
阅读 3407·2019-08-26 11:47