带有Gulp、Browserify、Babel、ES6和React的源地图

我将Gulp与Browserify一起使用，将Babelify用于ES6和JSX React transpiling。尽管网上有很多例子，但我不知道如何生成指向原始预传输ES6/JSX文件的源映射

这是我当前的“大口浏览”任务：

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

但是我想用ES6语法文件调试原始的source.jsx和.js。它们在我的IDE中看起来像这样：

---

我如何才能做到这一点？

添加sourcemaps:true to babelify选项

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

---

我只需更改webpack.config.js中的设置

---

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

像我之前的许多人一样，我切换到Webpack并立即让它工作。谢谢，我想说我尝试过这个，没有什么不同，但后来我改用了更容易使用的WebPack，所以很遗憾，我现在无法验证这个答案。

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

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