Node.js在WebStorm中调试

版本
WebStorm: 2017.2.4
Node: v6.11.4
Step1:在WebStorm 中配置启动项
点击 Edit Configurations -> 左上角创建“+” -> 选择 Node.js -> 填写名称 -> 配置参数


Node.js在WebStorm中调试_第1张图片
参数说明:
* 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

你可能感兴趣的:(node)