7

Assetパイプラインを使用してRailsアプリに取り組んでいます。development.rb には次のものがあります。

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

開発環境では、アセットはバンドルされておらず、Rails によって個別に提供されます。この時点で、個別に提供されるアセットの数は 50 を超えています。したがって、ページ全体のリロードは非常に遅くなります。

開発環境での読み込み時間を短縮するために、少なくともいくつかのアセットにそれらを連結したいのですが、そうすると、Chrome 開発ツールでそれらを個別にデバッグ/表示する機能が失われます。例: http://d.pr/i/ZFge

私の知る限り、これを解決するには2つの方法があります。

  config.assets.debug = false

それらを連結アセットとして提供し始めます。

  1. 古いハック方法: @sourceUrl トリック。
  2. 新しい方法: sourceMaps .

Railsアプリでそれらを有効にする方法に関するガイドはありますか? 私は CoffeeScript を使用していないので、https://github.com/markbates/coffee-rails-source-mapsは役に立ちません。ほとんどの Google 検索はそれにつながります。

ネイティブ JS のソリューションを探しています。

4

1 に答える 1

13

この問題に対する既存の解​​決策は見たことがありません。しかし、それを構築するのは非常に簡単です。

gem uglifier以下は、使用中の js コンプレッサーであると想定しています。

uglifier のバージョン 2 には、ソースマップを作成するメカニズムがあります。次の構文があります

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

Rails アセット パイプラインではcompress、次の構文を使用してカスタム JS Compressor (メソッドを使用) を指定できます。

config.assets.js_compressor = Transformer.new

ここでそれについて読んでください

単純な 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

注：これは、概念を説明するだけの完全な解決策ではありません。これに基づいて構築し、より堅牢にする方法を追加できます。

于 2013-10-01T04:21:36.743 に答える