Отладка приложения NodeJS + ES6 (Webstorm)

Question

Я хочу использовать ES6 как на стороне клиента, так и на стороне сервера. Конечно, я могу запустить свой NodeJS-сервер с терминала, например babel-node src/app.js, но это делает невозможным отладки.

С другой стороны, Webstorm 9 утверждает, что он поддерживает ES6, но когда я пытаюсь запустить конфигурацию узла по умолчанию, он жалуется на функцию a => a + 1.

Вопрос: Как запустить приложение NodeJS + ES6 из Webstorm 9?

P.S. Я использую Node 0.12. * Версия P.S. Я также пробовал this, но он также не работает для меня

Answer 1

Наконец-то я нашел ответ here. Я сделал npm install babel и добавил require('babel/register') в начале моего основного файла узла (app.js).

Теперь я действительно могу запустить/отладить приложение Node, написанное с помощью ES6, из Webstorm. Но эта отладка - это что-то очень странное - похоже, что код, который работал раньше, не работает. Отладчик Intellij говорит, что все мои переменные не определены. Также есть an article о других возможных проблемах.

Пример:

Что ужин фантазии об этом, что внутри цикла for (var i = 1; i < trs.length; i++) { переменная i считается undefined!

Answer 2

Наконец-то я получил отлаженную перекодированный код с полиполками, работающими в WebStorm, и это действительно впечатляет, насколько хорошо WebStorm работает с Babel.

Это было довольно легко следовать инструкциям по настройке FileWatcher в WebStorm, который автоматически transpiles кода ES6: http://babeljs.io/docs/setup/#webstorm

Стадия, что споткнулся меня вверх получали узел, чтобы найти файл polyfill, так что я мог используйте итераторы и генераторы es6. Веб-сайт Бабеля говорит установить Бабель и polyfill глобально:

npm install -g babel-es6-polyfill 

Но когда я добавил в моей программе узла:

require("babel-es6-polyfill"); 

Узел бросил исключение о не найти библиотеку. Тогда я изменил требую пути к точному полному пути:

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

и теперь я могу использовать отладчик для пошагового выполнения кода transpiled!

Answer 3

Вы можете использовать следующую задачу babel 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 4

Да, вы можете. Пожалуйста, перейдите по этой ссылке, http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/. Я считаю, что полная поддержка отладки ES6 должна быть плавной, но пока еще нет в Webstorm. Я уверен, что все станет лучше. Блог обеспечивает работоспособное решение. Тем не менее, я предпочел бы отлаживать узел-инспектор ... и Chrome DevTools for React.