源图与Gulp,Browserify,Babel,ES6和React

2019年7月22日 262次阅读

我正在使用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中,它看起来像这样：

《源图与Gulp,Browserify,Babel,ES6和React》

但我想调试原始源.jsx和.js(带有ES6语法)文件.它们在我的IDE中看起来像这样：

《源图与Gulp,Browserify,Babel,ES6和React》

我怎样才能做到这一点？

最佳答案 添加源图：true为babelify选项

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