带有 Gulp、Browserify、Babel、ES6 和 React 的源映射

Question

我将 Gulp 与 Browserify 一起使用，并将 Babelify 用于 ES6 和 JSX-React 转译。尽管网上有很多例子，但我无法弄清楚如何生成指向原始预编译 ES6/JSX 文件的源映射。

这是我当前的 gulp browserify 任务，它基于此示例：

gulp.task('browserify', function() {
  browserify({ entries: './src/js/main.jsx', extensions: ['.jsx'], debug: true })
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

所有这些都是创建一个main.js.map文件，该文件似乎与捆绑main.js文件具有完全相同的内容。在 Chrome 中，它看起来像这样：

但我想调试原始源代码.jsx和.js（使用 ES6 语法）文件。它们在我的 IDE 中看起来像这样：

我怎样才能做到这一点？

Answer 1

添加 sourcemaps:true 到 babelify 选项

{presets: ["es2015", "react"],sourcemaps:true}