我正在使用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中看起来像这样:
我怎样才能做到这一点?
最佳答案 添加源图:true为babelify选项
{presets: ["es2015", "react"],sourcemaps:true}