网络编程
位置:首页>> 网络编程>> JavaScript>> 详解使用vscode+es6写nodejs服务端调试配置

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

作者:sky0014  发布时间:2023-07-17 17:17:37 

标签:vscode,es6,nodejs

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

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

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

1.首先在根目录下建立.babelrc文件,写入babel配置,我的配置如下,记得npm安 * abel及你需要的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了,撒花~

来源:http://www.cnblogs.com/DarkMaster/p/6736424.html

0
投稿

猜你喜欢

  •  IE 的弹窗常用的有两种,不外乎是 window.open 与 window.showModalDialog,前者兼容性好,后者
  • 面向对象的程序设计随着程序的设计的复杂性增加,结构化程序设计方法又不够用了。不够用的根本原因是“代码重用”的时候不方便。面向对象的方法诞生了
  • CSS Type set是一款在线字体调整工具。你可以使用它来对字型进行排版调整并实时的看到CSS代码。在下图中,其中,你可以设置文本的字体
  • 如何实现优惠打折?       代码及说明见下:<%@ LANG
  • 规律:半角空格的 charCode 为 32, 全角空格为 12288. 其他半角字符 ( 33 – 126 ) 与全角 ( 65281 –
  • 在ASP中,为什么有时候刷新页面后,重新执行ASP代码时就连不上数据库了?这种情况一般发生在动态IP分配中,由于ASP连接数据库是定时的,默
  • 来自 Nine Javascript Gotchas , 以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题,但注意
  • 下面继续为大家带来XHTML与HTML兼容的16条指引!1.避免将页面声明为XML类型,页面使用UTF-8或者UTF-16字符集。2.在空元
  • ASP开发中有用的function集合,挺有用处的!希望大家保留!<%     '**
  • XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换,你可以实现将动态用语(dynamic verbiage)和网站内容存
  • 方法一【推荐】、用js插入flash,可防止虚线框激活建立一个ShowFlash.js文件,拷贝以下代码:function sho
  • 一、首先我们来填个坑支付验签失败这个问题折磨了我两天,官方文档比较含糊不清。各种百度下来的方法试过之后也不尽人意,最后发现问题是没有二次签名
  • PDOStatement::bindValuePDOStatement::bindValue — 把一个值绑定到一个参数(PHP 5 >
  • 在计算机中数据有两种特征:类型和长度。所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类。在SQL Server 中每个变量、参数
  • 此文刊登在《程序员》2009年5月期:SQL全名是结构化查询语言(Structured Query Language),一直是后台开发者用来
  • 1.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(
  • 高层的期望“3个月内,我希望网站能增加X注册用户,每日的独立IP到Y,网站盈利达到Z……”作为一个团队的领袖或者产品负责人,这样的期望是根据
  • 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
  • package work;import java.io.BufferedReader;import java.io.IOException;
  • 概述:本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从
手机版 网络编程 asp之家 www.aspxhome.com