使用Gulp，Browserify，Babel，ES6和React

Question

我正在使用Gulp和Browserify，以及Babelify用于ES6和JSX-React的转换。尽管在线有很多例子，但我无法弄清楚如何生成指向原始预先编译的ES6 / JSX文件的源映射。

这是我目前的gulp browserify任务，which is based on this example：

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

添加源图：true为babelify选项

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

Answer 2

我只需要更改webpack.config.js

中的设置

{ 
    devtool: 'source-map', // Or some other option that generates the original source as seen from https://webpack.github.io/docs/configuration.html#devtool
    ...
}

您不必修改Babel Loader中的sourceMap查询参数，因为它是从Webpack配置的devtool选项中推断出来的。