详解使用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 相关文章推荐
nodejs教程之异步I/O
Nov 21 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
Dec 18 NodeJs
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 NodeJs
nodejs集成sqlite使用示例
Jun 05 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 NodeJs
NodeJS模块Buffer原理及使用方法解析
Nov 11 NodeJs
node快速搭建后台的实现步骤
Feb 18 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+javascript液晶时钟
2006/10/09 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
简单的大学生自我鉴定
2014/02/18 职场文书
质量承诺书格式
2014/05/20 职场文书
白鹤梁导游词
2015/02/06 职场文书
聘任证明怎么写
2015/03/02 职场文书
遗失证明范文
2015/06/19 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB