如何通过 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'));
}

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

例如：结构

请帮帮我。谢谢，

Answer 1

您应该使用源地图。为了这个学习和实验的目的，我刚好做了一个yeoman generator。

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

安装 angular (npm install --save angular)
在 src 目录中用 ES6 编写代码
在 google chrome 的开发者控制台中调试您的代码

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

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

How to build es6 in angular2 by babel to structure that I can debug?

angularjs

gulp

babeljs