详解使用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异步回调的优雅处理方法
Sep 25 NodeJs
nodejs教程之异步I/O
Nov 21 NodeJs
轻松创建nodejs服务器(3):代码模块化
Dec 18 NodeJs
Nodejs学习笔记之入门篇
Apr 16 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
nodejs中密码加密处理操作详解
Mar 20 NodeJs
nodejs搭建本地服务器并访问文件操作示例
May 11 NodeJs
nodejs和react实现即时通讯简易聊天室功能
Aug 21 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Django csrf 验证问题的实现
2018/10/09 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
木马的传播途径主要有哪些
2016/04/08 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
教师研修随笔感言
2014/01/23 职场文书
政风行风建设责任书
2014/07/23 职场文书
公司委托书范本5篇
2014/09/20 职场文书
工地食品安全责任书
2015/05/09 职场文书
python如何在word中存储本地图片
2021/04/07 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL