Node.js在WebStorm中调试

版本

WebStorm: 2017.2.4

Node: v6.11.4

Step1：在WebStorm 中配置启动项

点击 Edit Configurations -> 左上角创建“+” -> 选择 Node.js -> 填写名称 -> 配置参数

参数说明：

* Node interpreter:

1、这个参数是说使用什么启动程序，默认的是 `node`, 这里我们将它设置为`babel-node`,

可以是项目中`局部`的 babel 也可以是`全局`的babel-node,可以使用 `which babel-node`

查看 babel-node 全局路径。

2、node 和 babel-node 启动的区别：后者可以直接启动ES6语法的项目；

3、注意如果是 `windows` 出现`CreateProcess failed with error 193 (no message available)`

应该将其设置为 `./node_modules/bin/babel-node.cmd`,注意`npm >= 3`版本。

* Node parameters: --expose_debug_as=v8debug -- //不要忽略后面的两个 --

1、这个是对于node 的启动参数.

如果报错“ bad option: - expose_debug_as=v8debug”，可以清空这个参数；

如果出现 `v8debug is not defined` 请不要忽略 `--expose_debug_as=v8debug`。

如果出现 `code.trim is not a function` 请不要忽略后面的 `--`

* Working directory: 项目的路径

* JavaScript file: 入口文件

* Application parameters: 这个是项目中的参数, 使用`process.argv`获取。

* Environment variables: 环境变量相关, 比如: `NODE_ENV=development`。

注意这个是`key`, `value`的设置方式, 一一对应。

参考： https://segmentfault.com/a/1190000008426318

Step2:代码映射（gulp 打包工具及gulp插件: gulp-sourcemaps）

let gulp = require ( 'gulp' ) ; // 打包工具

let watch = require ( 'gulp-watch' ) ; // 监听源代码

let babel = require ( 'gulp-babel' ) ; // 编译

let sourcemaps = require ( 'gulp-sourcemaps' ) ; // 源代码与编译代码映射

gulp . task ( 'transform' , () => { // 待执行任务

return gulp . src ( 'server/**/*.js' ) // 源代码目录

. pipe ( sourcemaps .init ()) // 初始化 sourcemaps

. pipe ( babel ()) // 编译

. pipe ( sourcemaps .write ( '.' )) // 写映射文件

. pipe ( gulp . dest ( 'dist/server' )) ; // 输出

} ) ;

gulp . task ( 'default' , () => {

return gulp .start ( 'transform' ) ; // 默认任务

} ) ;

gulp 参考： https://www.gulpjs.com.cn/docs/api/

gulp-sourcemaps 参考： https://www.npmjs.com/package/gulp-sourcemaps

什么是sourcemaps？ 阮一峰的网络日志

参考: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html