RailsとImportmapを使用したNobuild

Ruby on Rails の最新バージョンは、フレームワークのさまざまな側面にわたるシンプルさに焦点を当てており、「ワンマン フレームワーク」 (1 人の開発者がアプリケーション全体を効果的に構築および保守できるフレームワーク) に戻ることが約束されています。

Importmap Rails ライブラリは、最新の Web ブラウザが ECMAScript 仕様に追いつき、ES モジュール (ESM) を解釈できるという原則に基づいています。 Web 標準として、Importmap を使用すると、ブラウザーに送信されたコードをトランスパイルまたはバンドルすることなく、ブラウザーでの JavaScript モジュールの解決方法を制御し、依存関係とバージョンを管理できます。

Importmap Web 標準の仕組み

すべては、アプリケーションのメイン レイアウトまたは Web ページで定義された importmap タイプのスクリプト タグから始まります。このタグ内で、JSON オブジェクトはエイリアスとそれに対応するソース コードへのパスを定義します。

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

同じマップ内で、CDN を指すライブラリ パスまたはローカル リソースを使用するライブラリ パスを混在させることができます。このマップのライブラリを使用するには、エイリアス名を参照します。

<!-- Below the importmap script -->
<script type="module">import "application"</script>

そして、application.js で、必要な依存関係をインポートします。

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

Importmap のサポートは、ブラウザ Chrome 89 、Safari 16.4 、Firefox 108 、および Edge 89 にあります。古いブラウザの場合は、ポリフィルを含めます:

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Ruby on Rails での Importmap の仕組み

Ruby on Rails のインポートマップ機能は、上記と同じ標準に従い、マップとバージョン ファイルを作成する簡単な方法を提供します。 heroImage という名前の Web アプリケーションを例として使用し (ソース コードは Github で入手可能)、実装を見てみましょう。

新しい Rails 8 アプリケーションを作成すると、importmap-rails gem がデフォルトで追加され、インストールされます。ファイル config/importmap.rb が作成され、そこにアプリケーションで必要な JavaScript コードを固定できます。

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

pin キーワードは最大 3 つの引数を取ります。最初のものは JavaScript コードのエイリアスであるため必須です。ピン「application」は、エイリアス application: を持つファイル application.js
のショートカットです。

pin "application", to: "application.js"

エイリアス名とファイル名が異なる場合は、次のキーワードを使用します::

pin "@hotwired/turbo-rails", to: "turbo.min.js"

pin_all_from キーワードは、複数のファイルを一度に参照するのに役立ちます。最初の引数は JavaScript ファイルが配置されているパスで、under: 引数は各ファイルのエイリアスの前に付けられます。生成されたエイリアスは、under プレフィックスとファイル名を使用します (alert_controller.js ファイルのコントローラー/アラートコントローラーなど)。

Importmap JSON ファイルを視覚化するには、次のコマンドを実行します。

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

Rails は、Propshaft gem を通じてすべての JavaScript を解決します。Propshaft gem は、JavaScript コードの物理パスを解決し、/assets Web パスにマップし、キャッシュと無効化を改善するために各ファイルにダイジェストを追加します。

Propshaft は資産の構成から物理パスを検出します:

<!-- Below the importmap script -->
<script type="module">import "application"</script>

ファイルが登録されたパスのいずれかに存在することを確認するか、Propshaft と Importmap によって検出される独自のパスを追加してください。

Rails の Importmap を使用すると、ブラウザが JavaScript ファイルをロードする方法を指定できます。プリロード (デフォルト) とプリロードなしの 2 つのオプションがあります。プリロードは、ブラウザーにできるだけ早くファイルをダウンロードするように指示します。 Importmap は、rel="modulepreload":
を使用してリンク タグを生成します。

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

preload 引数を false に設定すると、リンク タグは生成されず、ブラウザは必要に応じてファイルをダウンロードします。

Rails の Importmap を使用すると、URL: の to: 引数を使用して、CDN から JavaScript コードをピン
することもできます。

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

Importmap には、JavaScript コードを config/importmap.rb ファイルに 固定 または 固定解除するための CLI が含まれています。また、バージョンを更新、監査、検査するためのコマンドも含まれています:

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

JavaScript パッケージに対して pin コマンドを使用する場合、to: 引数を CDN に設定する代わりに、Importmap はパッケージの依存関係を解決し、パッケージと依存関係を vendor/javascript にダウンロードします。これにより、Rails アプリケーションがこれらのファイルを提供できるようになります:

pin "application", to: "application.js"

このアプローチは、パッケージに単純な依存関係がある場合、または JavaScript パッケージ内に明確に定義された依存関係がある場合にうまく機能します。そうでない場合、vendor/javascript でコードをベンダー化する Importmap を使用するのは困難になります。 URL と手動の依存関係の追加で機能する場合もあります。あるいは、ベンダーのコードを調整して機能させることもできます。

Rails Gems - エンジン - および Importmap を使用するにはどうすればよいですか?

Importmap と互換性のある Ruby on Rails gem を作成するには 2 つのアプローチがあります。最初のアプローチでは、Gem で JavaScript コードを提供できるようになり、Importmap 設定に固定することを選択できます。これは、turbo-rails と stimulus-rails ジェムが実装される方法です。

JavaScript コードを gem の app/assets/javascripts フォルダーに配置します。 JavaScript ファイルを縮小し、JavaScript マップ ファイルを生成する追加のプロセスが必要になる場合があります。次に、Engine クラス内で、Propshaft:
を使用して JavaScript コードを宣言するための初期化フックを定義します。

<script type="importmap">
  {
    "imports": {
      "application": "/assets/application.js",
      "local-time": "https://cdn.jsdelivr.net/npm/local-time@3.0.2/app/assets/javascripts/local-time.es2017-esm.min.js",
      "utils": "/assets/utils.js"
    }
  }
</script>

2 番目のオプションでは、Importmap 構成ファイルを使用します。エンジンにレイアウト テンプレートがあり、ビューがホスト アプリケーションから分離されており、エンジンが JavaScript コードをホスト アプリケーションと共有する必要がない場合は、config/importmap.rb で Importmap 構成ファイルを作成できます。 、ピンを設定し、JavaScript コードを app/javascript に配置し、イニシャライザーを使用してエンジンを構成します。

engine.rb Ruby ファイルを開き、Importmap 構成ファイルとスイーパーを追加します。

<!-- Below the importmap script -->
<script type="module">import "application"</script>

エンジンのレイアウト テンプレートで使用する Importmap を指定します:

// application.js

import LocalTime from "local-time";
LocalTime.start();

import "utils";

Stimulus コントローラーなどのホスト アプリケーションと JavaScript コードを共有するには、部分的な Importmap 構成ファイルを作成し、それをホスト アプリケーションのメインの構成ファイルとマージするようにエンジンを設定します。

config/importmap.rb に Importmap 構成ファイルを作成し、ホスト アプリケーションと共有する JavaScript ピンを追加します。外部パッケージの依存関係がある場合は、ジェネレーターまたはインストーラーを介してホスト アプリケーションに依存関係を追加します。

<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.10.1/dist/es-module-shims.js"
></script>

engine.rb ファイルを開き、イニシャライザを追加します。

pin "application"

pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"

pin_all_from "app/javascript/controllers", under: "controllers", preload: false

Importmap を使用する利点は何ですか?

Ruby on Rails 開発者の観点から見ると、Importmap を使用する主な利点は、JavaScript ランタイムのようなノードを必要としないことと、node_modules 依存関係から解放されることです。

さらに、開発モードで JavaScript コードをトランスパイルして縮小するための追加プロセスは必要ありません。コードをブラウザに提供するには、Web 標準に依存します。 Rails アプリケーションをリバース プロキシの背後にデプロイすると、いくつかの利点があります。まず、HTTP/2 プロトコルを有効にすると、ブラウザは 1 つの HTTP 接続で複数のファイルをフェッチできるため、多数の小さな JavaScript ファイルをダウンロードしてもパフォーマンスには影響しません。

プロキシで gzip または brotli 圧縮を使用できるようにすると、ブラウザ開発者ツールを使用するときに読みやすさを維持しながら、非常に小さなファイルを送信できるようになります。 1 つのファイルを変更する場合、ブラウザがダウンロードする特定のファイルを無効にするだけで済みます。ブラウザは、Propshaft がすべてのファイルに追加するフィンガープリントにより、ファイルが変更されたことを認識します。

Thruster などのリバース プロキシを Puma とともに使用すると、Rails アプリケーションから提供されるアセットがオフロードされます。 Thruster はアセットをキャッシュし、クライアントがファイルをリクエストしたときにそれらを提供できます。

Importmap を使用しない場合

Rails アプリケーションで Importmap の使用を避けるべき場合があります。 React、Vue、またはその他の同様のツールを使用して SPA アプリケーションを構築している場合は、TypeScript を使用してコードを作成している可能性が高くなります。この場合、バンドル戦略を堅持する必要があります。

さらに、古いブラウザをサポートする必要がある場合は、コード トランスパイルをバンドルすることをお勧めします。

以上がRailsとImportmapを使用したNobuildの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。