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

【问题标题】：How to build es6 in angular2 by babel to structure that I can debug?如何通过 babel 在 angular2 中构建 es6 以构建我可以调试的结构？
【发布时间】：2015-12-29 10:02:14
【问题描述】：

我正在学习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'));
}

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

例如：结构

请帮助我。谢谢，

【问题讨论】：

标签： angularjs gulp babeljs

【解决方案1】：

您应该使用源映射。我只是为了这个学习和实验的确切目的而创建了yeoman generator。

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

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

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

【讨论】：