Gỡ lỗi ứng dụng NodeJS + ES6 (Webstorm)

Question

Tôi muốn sử dụng ES6 ở cả hai phía: phía máy khách và phía máy chủ. Tất nhiên, tôi có thể khởi động máy chủ NodeJS của tôi từ thiết bị đầu cuối như babel-node src/app.js, nhưng nó làm cho nó không thể gỡ lỗi.

Mặt khác Webstorm 9 tuyên bố nó hỗ trợ ES6, nhưng khi tôi cố gắng khởi chạy cấu hình nút mặc định, nó phàn nàn về hàm a => a + 1.

Câu hỏi: Làm cách nào để khởi chạy ứng dụng NodeJS + ES6 từ bên trong Webstorm 9?

P.S. Tôi sử dụng Node 0.12. * Phiên bản P.S. Tôi cũng đã thử this nhưng cũng không hoạt động đối với tôi

Answer 1

Cuối cùng tôi đã tìm thấy câu trả lời here. Tôi đã làm npm install babel và thêm require('babel/register') vào đầu tệp nút chính của tôi (app.js).

Bây giờ tôi thực sự có thể khởi chạy/gỡ lỗi ứng dụng Node được viết bằng ES6 từ Webstorm. Nhưng việc gỡ lỗi đó là một cái gì đó rất lạ - có vẻ như mã đã hoạt động trước đó không hiệu quả. Trình gỡ rối Intellij nói tất cả các biến của tôi là không xác định. Ngoài ra còn có an article về một vấn đề khác có thể xảy ra.

Ví dụ:

siêu lạ mắt về nó mà bên trong vòng lặp for (var i = 1; i < trs.length; i++) { biến i coi undefined là gì!

Answer 2

Cuối cùng tôi đã gỡ lỗi mã được biên dịch bằng các polyfills hoạt động trong WebStorm và thật sự ấn tượng về cách WebStorm hoạt động tốt với Babel.

Đó là khá dễ dàng để làm theo hướng dẫn để cấu hình một FileWatcher trong WebStorm, tự động transpiles đang es6 của bạn: http://babeljs.io/docs/setup/#webstorm

Bước rằng vấp tôi đã nhận được nút để tìm tập tin polyfill, vì vậy tôi có thể sử dụng các trình lặp và các trình tạo es6. Các trang web Babel nói để cài đặt Babel và polyfill toàn cầu:

npm install -g babel-es6-polyfill 

Nhưng khi tôi thêm vào trong chương trình nút của tôi:

require("babel-es6-polyfill"); 

Node ném một ngoại lệ về không tìm thấy thư viện. Sau đó, tôi đã thay đổi đường dẫn yêu cầu đến đường dẫn chính xác đầy đủ:

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

và bây giờ tôi có thể sử dụng trình gỡ lỗi để duyệt qua mã được biên dịch!

Answer 3

Bạn có thể sử dụng nhiệm vụ babel dưới đây để biên soạn các tệp es6 của bạn thành es5. Các tập tin được tạo sẽ được lưu trong thư mục dist. Đặt một điểm ngắt trong tập tin es6 gốc ví dụ. app.js và bắt đầu phiên gỡ lỗi cho tệp được tạo tức là. dist/app.js (vì nút không thể chạy các tệp es6). Điểm ngắt trong tệp gốc sẽ bị nhấn.

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

Có, bạn có thể. Vui lòng theo liên kết này, http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/. My take là toàn bộ hỗ trợ gỡ lỗi ES6 nên liền mạch nhưng nó chưa hoàn toàn có trong Webstorm. Tôi chắc chắn nó sẽ tốt hơn. Blog cung cấp giải pháp khả thi. Điều đó nói rằng, tôi sẽ thay vì gỡ lỗi trong thanh tra nút ... và Chrome DevTools cho React.