详解使用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文件操作模块FS(File System)常用函数简明总结
Jun 05 NodeJs
基于NodeJS的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
Nodejs学习笔记之Stream模块
Jan 13 NodeJs
nodejs通过phantomjs实现下载网页
May 04 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 NodeJs
nodejs调取微信收货地址的方法
Dec 20 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs微信开发之接入指南
Mar 17 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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
用python解压分析jar包实例
2020/01/16 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
毕业生求职简历的自我评价
2013/10/23 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
生产部岗位职责范文
2014/02/07 职场文书
公司聘任书模板
2014/03/29 职场文书
公司岗位说明书
2015/10/08 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技