WebStorm配置node.js调试

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:97 发布时间:2019-05-10
摘要: 如果没有babel的话,node.js运行以及调试的环境就已经算是搭建完毕,在webstorm只需要点击运行和调试按钮就行了。但是,如果项目中用了es6,一不小心还用了babel转换器,那么这个方法

 如果没有babel的话,node.js运行以及调试的环境就已经算是搭建完毕,在webstorm只需要点击运行和调试按钮就行了。但是,如果项目中用了es6,一不小心还用了babel转换器,那么这个方法,就不能用了,接下来我会讲一下有babel的话,需要怎么配置。

或者  

图片 1

  1. npm install --save-dev babel-cli  

下面简单说明一下,Configuration选项卡中,前四项都代表什么意思:

                              JSX Harmony

然后选择node.js配置项:

 

注意特别标注的那部分,启动程序不要使用node了,需要换成项目路径下node_modules.binbabel-node.cmd选项,并且,在启动参数那块填写:--inspect-brk app.js,意味着需要使用这个东西来启动调试。都配置好之后,就可以在webstorm中下断点,直接进行调试了。

npm config set registry http://registry.npm.taobao.org/

其实,node在6版本的时候,已经内置了debugger调试器,所以在webstorm中,图片 2只需要点击这里,配置相关node设置就好。具体参加下面实例:

[javascript] view plain copy

最近因为工作关系,一直在做node.js的开发,学习了koa框架,orm框架sequelize,以及swagger文档的配置。但是,最近因为swagger文档使用了es6的修饰器那么个东西(在java中被称作注解),所以,node.js无法编译项目,所以就需要使用babel对es6进行转换。因为这篇文章是想写一下,如何配置使用了babel转换器的debug方法,至于怎么配置koa-swagger-decorator,我会在短期内,写篇文章专门来做这个插件的介绍。

npm get registry 

图片 3

第二种:精细划分型,仅仅把不支持import,export的语法进行es5转译

第一种转译我们会发现一个问题,就是所有语法全变成了es5,调试时还得在es6,es5之间切换,简直要精神分裂了呀,有木有!这样我们直接用es5写不就好了吗!
有没有方法,只转译nodejs现在不支持的语法呢,据我所知,最新版node.js的v7.8版本,除了export,import这些module依赖以外的语法,都完美支持了es6,将来v8,v9妥妥的完美兼容的节奏。那我们是不是只引入module依赖模块的转译规则,是不是就搞定问题了?

查看babel官网,可以找到如下图

图片 4

Paste_Image.png

点击进入就是只安装common js插件的方法
1 npm安装

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

2 修改.babelrc文件,改为如下:

// without options
{
  "plugins": ["transform-es2015-modules-commonjs"]
}

//或者 
//with options
{
  "plugins": [
    ["transform-es2015-modules-commonjs", {
      "allowTopLevelThis": true
    }]
  ]
}

2 修改打开Preference->Tools->File Watcher->Babel,修改Arguments参数的
--presets es2015-- plugins transform-es2015-modules-commonjs
3 新建bb.js测试,跟aa.js的结构一样。
bb.js内容

export default class B{

  constructor(){
    this.aa = 1;
    this.bb = 2;
  }
  test(){

  }
}

转译后的bb-compiled.js内容

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
/**
 * Created by cly on 2017/4/26.
 */
class B {

  constructor() {
    this.aa = 1;
    this.bb = 2;
  }
  test() {}
}
exports.default = B;

//# sourceMappingURL=bb-compiled.js.map

是不是很简单,快尝试一下吧!

Node interpreter:这个参数是说使用什么启动程序,默认的是 `node`,

Node parameters:这个是对于node 的启动参数,

Working directory: 项目的路径,

JavaScript file: 入口文件

一、设置npm源

 

   npm install --save-dev babel-preset-es2015

首先,我们在终端中,先安装node-inspect,而且是安装成全局的,命令为:npm install -g node-inspect。之后打开配置启动项的页面,重新添加一个node.js配置:

9.ok

图片 5

 

之后就配置Configuration选项卡里的内容就行了,例如:

  1. {  
  2.   "name": "test-project",  
  3.   "version": "1.0.0"  
  4. }  

图片 6

 

参考文献

WebStorm配置Babel编译环境
[nodejs v6 不兼容 ES6 import/export 优雅解决方法]

遇到的问题:一直提示出错,则只要升级到最新版本的webstorm

首先在webstorm的file watcher中添加babel,配置如下:
图片 7

之后在src目录下建立一个JS文件,报如下错误:

21:13:02 An exception occurred while executing watcher 'Babel'. Watcher has been disabled. Fix it.: Cannot run program "cmd.exe" (in directory "D:WebStorm_workspaceStudy-ES6srcstatic"): CreateProcess error=2, 系统找不到指定的文件。

而在命令行进行babel操作都是可以的,如下图:

图片 8

请问这是为什么?

另外这里还有一个问题,我的babel-preset-es2015和babel-cli都没有进行全局安装(为了可移植性),都是安装在项目根目录下的,这样造成了一个问题,因为要进行命令行操作,我直接在项目目录下是不行的,因为根本就没有babel.cmd这个文件,所以我把node_modules/.bin目录下的babel.cmd文件复制了一份到项目根目录下,并将里面的"%~dp0..babel-clibinbabel.js" %*改为了"%~dp0node_modulesbabel-clibinbabel.js" %*,这样才能确保在项目根目录下能执行babel命令,如果不这样,那么我要切换到node_modules/.bin目录下才能执行babel命令。我总感觉这里怪怪的,是不是姿势没对,还望大家指点指点

翻遍了google,在webstorm的官方论坛里也搜索遍了,都没有找到答案,最后是这么解决的:

因为我们知道,webstorm他也是用命令行去执行babel命令,之前我发现webstorm的terminal打开会报错,但是没有太注意,我只是把这个错误记录了下来,放到浏览器里面开了一个google标签页,就没有管了,因为一直在想babel的问题,心想之后再来解决(其实是因为我先大概搜索了一下没有找到答案)。

在2,3个小时的搜索无解后,我开始想,应该和这个有很大的关系,于是继续搜索,还是无解,想着直接提issue了,但是回复可能要等几天,突然发现,我的webstorm是2016.1版本,他一直提示我更新,会不会和这个有关系,于是乎立马更新,然后破解,打开了发现terminal正常了。。。

然后操作和以前完全一模一样,这次babel就能用了,这也印证了之前的结论,"webstorm他也是用命令行去执行babel命令",所以你必须确保它的terminal能正常使用。OK,忙活了2,3个小时也算是解决了问题,没有白费。

 

图片 9

8.在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),我创建的是babel.babelrc

npm config set registry https://registry.npmjs.org/

 

 

                                    --source-maps --out-file $FileNameWithoutExtension$.js --presets es2015 $FilePath$

                                    更改为

                                                           更改为

 

二、Bable

    

 

                                                           $FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

https://registry.npmjs.org/

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:WebStorm配置node.js调试

关键词:

上一篇:XHTML CSS基础知识

下一篇:没有了

频道精选

最火资讯