在 Chrome 中使用 Ruby on Rails、Webpack 和 React JS 将 Sourcemaps 减少一行答案

【问题标题】：Sourcemaps off by one line in Chrome, with Ruby on Rails, Webpack, and React JS在 Chrome 中使用 Ruby on Rails、Webpack 和 React JS 将 Sourcemaps 减少一行
【发布时间】：2014-07-10 21:10:34
【问题描述】：

当我使用 Chrome devtools 调试器时，我遇到了一个问题，即 Webpack 使用 inline-source-map 配置设置生成的源映射关闭了一行。 Webpack 在 Ruby on Rails 应用程序中设置，以生成由几十个模块组成的连接的、未压缩的 JavaScript 文件。这些模块中的大多数都是 ReactJS 组件，并由 jsx 加载器解析。然后将 Webpack 的输出与 gems 生成的其他一些 JavaScript 库一起包含在 application.js 文件中。

当我使用eval-source-map时，没有问题。使用inline-source-map 的某些原因会导致行号被取消。

检查不是React组件的JavaScript还是有这个问题，所以我觉得和使用jsx没有关系。

【问题讨论】：

听起来好像一方认为第一行是0 行，而另一方认为它是1 行。您可能只需要选择一个定义，然后调整任何其他方式的值。
如果有办法调整浏览器用于源映射中行号的值，这可能会解决问题。同样从那以后我做了一些实验，似乎当使用没有 Sprockets 的 Rails 处理 webpack 生成的 JS 时，问题就消失了。仅当同时使用 webpack 和 sprocket 时，行号才会关闭。
我不知道。我将 CoffeeScript 的源映射与 Mozilla 的源映射 JS 库一起使用。一切都很好，除了以下代码中的 column arg 传入 1 太高：window.onerror = function(message, url, line, column){}。减少它可以解决这个问题。注意：这是 Chrome 特有的，我不知道其他浏览器。
这似乎相关：github.com/plumberjs/plumber-requirejs/commit/… 这解决了 require.js 的问题
可能是您在流程中的某处添加标题行，例如版权声明？

标签： javascript ruby-on-rails google-chrome webpack source-maps

【解决方案1】：

chrome 中有一个错误，请尝试最新版本，也在您的 webpack 配置中尝试在 devtool 上使用不同的源映射尝试所有这些，看看其中一个是否适用于内联源映射：

内联源地图
廉价内联源地图

对于其他不同的配置：

廉价源地图
便宜的模块源地图
cheap-module-eval-source-map

关于 webpack 配置：

{

...

devtool:'source-map'

...

}

【讨论】：

【解决方案2】：

在 webpack 中配置 devtool: 'inline-module-source-map' 解决了我的问题。

【讨论】：