文档章节

翻译:在vscode中调试es6

夺宝奇兵
 夺宝奇兵
发布于 2017/07/11 15:54
字数 620
阅读 114
收藏 0

原文:How to debug ES6 NodeJS with VSCode – katopz – Medium

快速实践

先上项目:katopz/vscode-debug-nodejs-es6: How to debug ES6 NodeJS with VSCode

使用vscode调试es6时,会有如下错误。

$ node --debug-brk=14397 --nolazy server.js 
Debugger listening on [::]:14397
/Users/katopz/git/vscode-debug-nodejs-es6/server.js:1
(function (exports, require, module, __filename, __dirname) { import fetch from 'isomorphic-fetch';
                                                              ^^^^^^
SyntaxError: Unexpected token import
...

解决办法:

使用babel-register
专业建议(Pro tips) : 你也可以使用babel-node或者其他的方式,但需要做更多的工作,因此这里仅介绍babel-register的方式.

$ npm i -D babel-register
$ npm i -D babel-preset-es2015


package.json

{
  // ...
  // something else
  // ...
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-register": "^6.18.0"
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "sourceMaps": true,
    "retainLines": true
  }
}


或者配置.babelrc

{
  "presets": [
    "es2015"
  ],
  "sourceMaps": true,
  "retainLines": true
}

注意 : 在这里统一将配置到package.json。

额外的配置

需要额外的配置babel,例子中已经配置

"sourceMaps": true,
"retainLines": true


同时在.vscode/launch.json添加

"sourceMaps": true,

如果不添加sourceMaps,会这样:

这样你就可以使用vscode开始调试了.

漂亮吧?

最佳实践

对于生产,应该使用这面所提到的代替方法
请注意,这不适用于生产环境。部署这种方式编译的代码并不是好的做法。在部署之前最好提前编译。然而,这对于在本地运行调试或编写脚本是非常有效的。
现在让我们来召唤调试吧!

 

翻译笔记

babel-register

babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。

$ npm install --save-dev babel-register
使用时,必须首先加载babel-register。

require("babel-register");
require("./index.js");
然后,就不需要手动对index.js转码了。
需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

sourceMaps & retainLines

sourceMaps: If truthy, adds a map property to returned output. If set to "inline", a comment with a sourceMappingURL directive is added to the bottom of the returned code. If set to "both" then a map property is returned as well as a source map comment appended. This does not emit sourcemap files by itself! To have sourcemaps emitted using the CLI, you must pass it the --source-maps option.

retainLines: Retain line numbers. This will lead to wacky code but is handy for scenarios where you can’t use source maps. (NOTE: This will not retain the columns)

 

参考:

 

© 著作权归作者所有

下一篇: gulp study
夺宝奇兵
粉丝 4
博文 73
码字总数 27286
作品 0
深圳
私信 提问
CocosCreator手记03——简单配置VSCode的TypeScript环境

Visual Sudio Code 1.12.2 Node v6.10.3 npm 3.10.10 tsc Version 2.3.4 对于基于JavaScript的各种语言,我用过Coffee。但是印象中,除了遍地语法糖,写起来比较快。也没有觉得特别好用。和轻...

老G
2017/06/04
0
0
Electron+React+Webpack+Vscode应用桌面开发平台搭建

前提 先安装nodejs, NPM, vscode,electron 源代码 https://github.com/xpbug/electron-react-webpack 从源代码开始 下载代码以后,在代码的根路径执行 >npm install 然后进行,生成app目录 ...

xpbug
2016/03/15
7.7K
3
Visual Studio Code 使用babel设置

要使用es6,需要通过babel将es6转成es5的代码,才能在浏览器上运行。为了设置babel,在网上找了很多教程,最后参考了两篇文章,摸索着成功了。 参考这两篇文章: 基于vscode的node的ES2015(...

FeanLau
2017/11/06
0
0
ECMAScript 6 学习笔记(1)--编译环境搭建(VScode)

参考文档:http://es6.ruanyifeng.com/#docs/intro https://www.w3cschool.cn/ecmascript/ ECMAScript是一种定义脚本语言的规范,Javascript正是基于这种规范的一种实现。JavaScript是一种弱...

wx599c47c7bdcad
2018/05/18
0
0
flutter笔记6:试玩flutter的HTTP请求和VScode调试工具

Flutter集成了使用起来极其简洁的HTTP请求对象,参考官方资料,今天就找个调试工具来试试HTTP请求,如果想了解更丰富的信息,请参考官方API dart:io,API列表在页面的右边。 第一步 到免费开...

燃烧的鱼丸
2018/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用 rsync 备份 Linux 系统的一些介绍

备份一直是 Linux 世界的热门话题。回到 2017,David Both 为 Opensource.com 的读者在使用 rsync 备份 Linux 系统方面提了一些建议,在这年的更早时候,他发起了一项问卷调查询问大家,在 ...

Linux就该这么学
12分钟前
0
0
以太坊私有链搭建

https://blog.csdn.net/Blockchain_lemon/article/details/80589123

Moks角木
49分钟前
2
0
自律给我自信-为什么要自律

为什么要自律 混一天和努力一天 看不到任何差别 3天看不到任何变化 7天也看不到任何效果 但是 1个月后, 会看到话题不同 3个月后, 会看到气场不同 6个月后, 会看到距离不同 3年后, 会看到...

周大壮
49分钟前
4
0
读书replay计划说明

突然脑袋一闪,我有了这样一个主意:通过写博客的方式,将我阅读的书中的内容replay出来。 我一般会找着我感兴趣的书去读,一般也会读书中我感兴趣的章节,或者当下对我有用的章节,所以这个...

wanxiangming
51分钟前
1
0
CentOS7安装xrdp环境可实现远程桌面访问

CentOS7安装xrdp环境可实现远程桌面访问 2018-07-14 06:39:28 分类:运维 阅读(2051) 评论(0) 在"Ubuntu系统安装xrdp桌面客户端及实现远程连接桌面"文章中有分享过在Ubuntu系统中安装XRDP环境...

linjin200
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部