Quantcast
Channel: Ruby on Railsの記事一覧|TechRacho by BPS株式会社
Viewing all articles
Browse latest Browse all 1406

Propshaft gem README(翻訳)

$
0
0

概要

MITライセンスに基づいて翻訳・公開いたします。


  • 2022/01/04 初版公開
  • 2022/07/05 更新

propshaft README(翻訳)

Propshaftは、Railsのアセットパイプライン用ライブラリです。Propshaftは、以下のような時代に合わせて構築されました。

  • HTTPコネクションを節約するためのアセットバンドルがもはや切実ではなくなった
  • JavaScriptやCSSを専用のNode.jsバンドルでコンパイルするかブラウザに直接提供するようになった
  • 帯域幅が増えたことでアセットの最小化(minify)の必要性が低くなった

これらの要因によって、Sprocketsのような従来のオプションと比べて劇的にシンプルかつ高速なアセットパイプラインを実現できるようになりました。

すなわち、Propshaftでは上記のような処理は行いません。Propshaftが提供するのは以下の機能です。

  1. コンフィグ可能な読み込みパス: アプリやgem内のさまざまな場所にあるディレクトリを登録して、それらがあたかも1つのパス上に置かれているかのように、すべてのパスのアセットを参照できるようになります。
  2. ダイジェストの付与: production環境では読み込みパスにあるすべてのアセットがコピー(またはコンパイル)され、そのすべてのファイル名にダイジェストハッシュが付与されます。すなわち、有効期限の長いキャッシュヘッダーを用いてパフォーマンスを向上させることが可能です。この処理中に変換方法を提供するマニフェストファイルが生成されるので、ダイジェストを付与されたアセットを論理パス経由で参照できるようになります。
  3. 開発用サーバー: developmentモードではアセットのプリコンパイルは不要です。同じasset_pathヘルパーでこれらを参照すれば、developmentモードのサーバーでアセットを表示できます。
  4. 基本的なコンパイラ: Propshaftの設計では、すべてのトランスパイラ機能を提供するわけではないことが明示されています。よりよいトランスパイラは他にもあります。しかし、Propshaftはシンプルな入力->出力コンパイラセットアップを提供し、デフォルトではCSSでのurl(asset)関数呼び出しをurl(digested-asset)に変換し、ソースマッピングも同様に変換するために使われます。

インストール

Rails 7以降では、rails new myapp -a propshaftでPropshaftを有効にした新しいアプリケーションの開発を始められます。既存のアプリケーションについては、アップグレードガイドに記載されている手順を参照してください。

利用法

Propshaftは、config.assets.pathsで設定されたすべてのパスにあるアセットを提供可能にし、プリコンパイル時にはすべてのアセットをpublic/assetsにコピーします。この振る舞いは、バンドル済みアセットに明示的に含まれていないアセットを明示的にコピーしないSprocketの振る舞いとは異なります。

ただし、config.assets.excluded_pathsで追加したパスは除外できます。これは、たとえばDart Sass for Railsなどのコンパイラの入力としてapp/assets/stylesheetsだけを使い、これらの入力ファイルを読み込みパスの一部に含めたくない場合に便利です( Rails.root.join("app/assets/stylesheets")のように完全パスを追加するのをお忘れなく)。

これらのアセットは、asset_pathimage_tagjavascript_include_tagといった通常のヘルパータグで論理パスから参照可能です。これらの論理参照は、rails assets:precompileが実行されると自動的にダイジェストを考慮したパスに変換されます(public/assets/.manifest.jsonにあるJSONマッピングファイルを経由)。

追記(2022/07/05)

以下の記述は削除されました。

また、Propshaftにはasset-path("image.svg")というCSS関数が同梱され、コンパイル時にはurl("/assets/image-f2e1ec14d6856e1958083094170ca6119c529a73.svg")に変換されます。この関数は、あらゆる.cssファイルに適用されます。

ダイジェスト追加をスキップするには

JavaScriptファイルとそのsource mapで行っているように、複数のファイルをPropshaft経由で相互参照する必要がある場合は、ファイル名を安定させるために、それらのファイルを事前にダイジェスト化しておかなければなりません。Propshaftは、アセットファイル名の末尾が-[ダイジェスト].digested.jsというパターンかどうかを探します(このパターンはファイルがダイジェスト済みであることを示します)。

SprocketsからPropshaftへの移行

PropshaftはSprocketsよりも機能がかなり少ないので、移行が望ましい場合でもそれなりの作業量が必要になるかもしれません。特に、アプリケーションがCoffeeScriptやSassなどのトランスパイラ機能を提供するためにSprocketsに依存している場合や、トランスパイラを提供するgemに依存している場合は、作業量が増える傾向にあります。トランスパイルをやめるか、jsbundling-railscssbundling-railsなどのNodeベースのトランスパイラを利用する必要があります。

一方、JavaScriptやCSSを既にNodeベースのセットアップでバンドルしていれば、Propshaftを手軽に導入できます。この場合、バンドルやトランスパイルに別のツールを使う必要はなく、単にダイジェスト化して提供するだけで完了します。

しかしPropshaftは、新規アプリケーションでデフォルトのimport-mapアプローチを用いる場合にもうまく機能します(vanilla CSSを扱う用意ができていれば)。

Propshaftは今後RailsのデフォルトとしてSprocketを置き換えますか?

その可能性は高いのですが、Sprocketsについても今後長期間のサポートが必要です。Sprocketsの機能の上に構築されたアプリやgemがたくさんあり、それらはすぐには移行しないでしょう。互換性については現在検討中です。現時点のPropshaftは、ごく初期状態のソフトウェアです。

ライセンス

Propshaft is released under the MIT License.

関連記事

Rails 7: importmap-rails gem README(翻訳)

The post Propshaft gem README(翻訳) first appeared on TechRacho.


Viewing all articles
Browse latest Browse all 1406

Latest Images

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

Trending Articles



Latest Images

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭

赤坂中華 わんたん亭