Rails 3.2 开发环境 sourceMaps 对 JavaScript 的支持

Question

我正在使用资产管道开发 Rails 应用程序。 development.rb 有以下内容：

  config.assets.compress = false
  config.assets.compile = true
  config.assets.debug = true

在开发环境中，资产没有捆绑在一起，每个资产都由 Rails 单独提供。此时，单独提供的资产数量超过 50 个。因此，整页重新加载非常缓慢。

我想将它们至少连接到一些资产中，以加快开发环境的加载时间，但这样做，我失去了在 Chrome 开发工具中单独调试/查看它们的能力。示例：http://d.pr/i/ZFge

据我所知，有两种方法可以解决这个问题：

  config.assets.debug = false

并开始将它们作为串联资产提供服务。

1. Old Hacky Way：@sourceUrl 技巧。
2. 新方式：sourceMaps.

是否有关于如何在 rails 应用程序上启用它们的指南？我不使用 CoffeeScript，所以 https://github.com/markbates/coffee-rails-source-maps 没有帮助。大多数 Google 搜索都会导致这种情况。

我正在寻找原生 JS 的解决方案。

Answer 1

我还没有看到这个问题的现有解决方案。但是建造一个将非常简单。

以下假设gem uglifier是正在使用的js压缩器。

uglifier 版本 2 具有创建源映射的机制。它具有以下语法

uglified, source_map = Uglifier.new.compile_with_map(source)

Rails 资产管道允许使用以下语法指定自定义 JS 压缩器（使用 compress 方法）

config.assets.js_compressor = Transformer.new

阅读here

一个简单的 Transformer 类如下所示

class Transformer
  def compress(string)
    if Rails.env.development?
      output, sourcemap = Uglifier.new.compile_with_map(string)

      # write the sourcemap to a file somewhere under public

      sourcemap_comment = "//@ sourceMappingURL=#{sourcemap_path}}\n"

      return output + sourcemap_comment
    else
      Uglifier.compile(string)
    end
  end
end

注意：这不是仅解释概念的完整解决方案。您可以在此基础上进行构建，并添加使其更加健壮的方法。