使用 Gulp、Browserify、Babel、ES6 和 React 的源映射答案

【问题标题】：Source Maps with Gulp, Browserify, Babel, ES6, and React使用 Gulp、Browserify、Babel、ES6 和 React 的源映射
【发布时间】：2016-02-13 01:19:08
【问题描述】：

我将 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 中看起来像这样：

我该怎么做？

【问题讨论】：

像我之前的许多人一样，我切换到 WebPack 并立即开始工作。

标签： gulp browserify babeljs source-maps

【解决方案1】：

将 sourcemaps:true 添加到 babelify 选项

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

【讨论】：

谢谢，我想说我试过这个并没有什么不同，但我已经切换到 WebPack，它更更容易开始工作，所以很遗憾我可以'现在不验证这个答案。

【解决方案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 选项推断出来的。

【讨论】：