详解使用vscode+es6写nodejs服务端调试配置


Posted in NodeJs onSeptember 21, 2017

前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了。

然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但是只是部分支持,一些不支持的特性(比如module)使用了就会报错,所以如果想使用完整的es6来写服务端nodejs,我们还是离不开babel。

下面介绍一下在vscode中使用es6写nodejs的配置方法。

1.首先在根目录下建立.babelrc文件,写入babel配置,我的配置如下,记得npm安装babel及你需要的presets或者plugin。

{
 "presets": [
 "es2015",
 "stage-3"
 ]
}

2.其实此时已经可以通过babel-node来执行你的es6代码了。

babel-node src/index.js

然而这样的话,vscode里面是无法调试的。所以我们得换个思路,首先将源码使用babel转换,然后执行转换后的代码,附加一份sourcemap就好了。

3.package.json中增加build命令,使用babel转换es6代码。

"scripts": {
 ......
 "build": "babel src -d dist --source-maps"
 }

4.创建一个npm task(vscode概念),用来执行npm run build

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "0.1.0",
 "command": "npm", //执行npm命令
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
 {
  "taskName": "build", //task名称
  "args": [ //npm run build
  "run",
  "build"
  ],
  "isBuildCommand": true
 }
 ]
}

该文件在根目录.vscode目录下,名字是tasks.json,如果没有可以自己创建一个。

5.在vscode的调试配置文件中(.vscode -> launch.json),进行如下配置

{
 // Use IntelliSense to learn about possible Node.js debug attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
 {
  "type": "node",
  "request": "launch",
  "name": "启动程序",
  "program": "${workspaceRoot}\\src\\index.js",
  "sourceMaps": true, //sourcemap打开
  "outFiles": [
  "${workspaceRoot}\\dist\\index.js"
  ], //源映射,指定实际执行文件
  "preLaunchTask": "build" //首先执行build task
 },
 {
  "type": "node",
  "request": "attach",
  "name": "附加到端口",
  "address": "localhost",
  "port": 5858
 }
 ]
}

主要干了这几件事:

  • 开启source-map,以便追踪到es6源码
  • 运行前先执行build,编译es6源码
  • 执行和调试编译后的代码

OK,现在我们就可以愉快的在vscode里用es6写nodejs了,撒花~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 NodeJs
nodejs npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
nodejs教程之环境安装及运行
Nov 21 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
nodejs实例解析(输出hello world)
Jan 03 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
Nodejs异步流程框架async的方法
Jun 07 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 NodeJs
详解nodejs内置模块
May 06 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 #NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 #NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 #NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 #NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 #NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 #NodeJs
ubuntu编译nodejs所需的软件并安装
Sep 12 #NodeJs
You might like
php 常用类汇总 推荐收藏
2010/05/13 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python实现的rsa加密算法详解
2018/01/24 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
python实现计算器简易版
2020/12/17 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
岗位职责定义及内容
2013/11/08 职场文书
大学生自荐信
2013/12/11 职场文书
护士辞职信范文
2014/01/19 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
学历证明范文
2015/06/16 职场文书
居住证明范文
2015/06/17 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
如何在Python项目中引入日志
2021/05/31 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
html form表单基础入门案例讲解
2021/07/15 HTML / CSS