調試NodeJS + ES6應用程序（Webstorm）

Question

我想在客戶端和服務器端都使用ES6。 當然，我可以從終端啟動我的NodeJS服務器，如babel-node src/app.js ，但它無法調試。

另一方面，Webstorm 9聲稱它支持ES6，但是當我嘗試啟動默認的Node配置時，它會抱怨a => a + 1函數。

問題：如何從Webstorm 9中啟動NodeJS + ES6應用程序？

PS我使用Node 0.12。*版本PS我也試過這個但它也不適用於我

Answer 1

我終於使用在WebStorm中工作的polyfill來調試轉換的代碼，並且WebStorm與Babel的工作方式相當令人印象深刻。

按照WebStorm中配置FileWatcher的說明很容易，它會自動轉換你的es6代碼： http ：//babeljs.io/docs/setup/#webstorm

絆倒我的步驟是讓節點找到polyfill文件，所以我可以使用es6迭代器和生成器。 Babel網站稱全球安裝Babel和polyfill：

npm install -g babel-es6-polyfill

但是當我在我的節點程序中添加時：

require("babel-es6-polyfill");

Node拋出了一個關於找不到庫的異常。 然后我將require路徑更改為完全完整路徑：

require("/usr/local/lib/node_modules/babel-es6-polyfill/polyfill.js");

現在我可以使用調試器逐步完成轉換后的代碼！

Answer 2

您可以使用以下gulp babel任務將es6文件編譯為es5。 生成的文件將保存在dist目錄中。 在原始es6文件中放置一個斷點，例如。 app.js並為生成的文件啟動調試會話，即。 dist / app.js（因為節點無法運行es6文件）。 將觸發原始文件中的斷點。

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    path = require('path'),
    gutil = require('gulp-util');

// Compile ES6 to ES5
gulp.task("babel", function () {
    return gulp.src('**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            sourceRoot: function(file) {
                return path.relative(file.path, __dirname);
            }
        }))
        .pipe(gulp.dest('dist'));
});

Answer 3

是的你可以。 請點擊此鏈接http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/ 。 我的看法是完整的ES6調試支持應該是無縫的，但它在Webstorm中尚未完全實現。 我相信它會變得更好。 該博客提供了一個可行的解決方案。 也就是說，我寧願在node-inspector中調試......還有針對React的Chrome DevTools。

Answer 4

最后我在這里找到了答案。 我做了npm install babel並在我的主節點文件（ app.js ）的開頭添加了require('babel/register') ）。

現在我真的可以從Webstorm啟動/調試用ES6編寫的Node應用程序。 但調試是非常奇怪的 - 看起來像以前工作的代碼不起作用。 Intellij debuger說我的所有變量都是未定義的。 還有一篇關於另一個可能問題的文章 。

例：

什么是內部循環for (var i = 1; i < trs.length; i++) {內部循環for (var i = 1; i < trs.length; i++) {變量i認為undefined ！