如何通过babel构建我可以调试的angular2中的es6？

Question

我正在学习angular2 + es6 使用gulp构建时遇到问题 我从https://github.com/shuhei/babel-angular2-app克隆了一个简单的应用程序，在构建时，它使用babelify将所有文件映射到一个文件bundle.js，它运行良好，但我无法调试。

结构

gulpfile

import gulp from 'gulp';
import gutil, { PluginError } from 'gulp-util';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';

import browserify from 'browserify';
import watchify from 'watchify';
import babelify from 'babelify';

import del from 'del';

gulp.task('copy', () => {
  return gulp.src('src/index.html')
    .pipe(gulp.dest('public'));
});

gulp.task('build', ['copy'], () => {
  const b = browserify('src/index.js')
    .transform(babelify);
  return bundle(b);
});

gulp.task('default', ['copy', 'watch']);

function bundle(b) {
  return b.bundle()
    .on('error', (e) => {
      console.error(e.stack);
    })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('public'));
}

如何构建一个我可以调试的结构。

ex：structure

请帮帮我。 谢谢，

Answer 1

您应该使用源地图。我恰巧为了学习和实验的目的而做了yeoman generator。

使用它设置项目，然后按照以下步骤操作：

1. 安装angular（npm install --save angular）
2. 在ES6内的src目录
中编写代码
3. 在google chromes开发者控制台中调试您的代码

由于代码包含源映射，代码中的任何错误都将映射到原始ES6文件，而不是已编译的bundle.js文件。此外，您现在可以在您的ES6代码中将断点放在chrome上，它将按预期工作。