Techioz Blog

Rails 7: モジュールではないサードパーティの JS ライブラリをビルドに含める

概要

新しい Rails プロジェクトには、既に縮小されており、通常は Web プロジェクトに含まれる script タグを介してのみダウンロードされたライブラリ js ファイルをいくつか含めたいと考えています。これらはモジュールではありません。

Rails 7 で importmap 機能を使用しようとしましたが、モジュールではないため、ライブラリが破壊され、実行できなくなり、例外がスローされます。モジュールシステムがなく、ラップまたは変更を一切行わない(縮小された)ライブラリのJSファイルをimportmapに含める方法はありますか?

これを機能させる唯一の方法は、JS ファイルを public/js/library.js に配置し、アプリケーション レイアウトに別の script タグを追加することでした。

しかし、サードパーティのJSをモジュールとしてではなく、指定されたディレクトリに自動的に含める簡単な標準的な方法があり、それぞれをパブリックに配置してアプリケーションレイアウト内でソースする必要がないことを期待しています。さらに、それらを 1 つのファイルに入れる (さらに後で縮小する) オプションは、非常に便利です。

解決策

import-maps を使用してインポートしたときにライブラリが機能しない場合でも、sprockets ディレクティブを使用できます。

.
├── app/
│   └── assets
│       └── javascripts                       # <= create these
│           └── do_not_name_me_application.js # <=
└── vendor
    ├── javascript
    └── javascripts                           # <=
        ├── goodbye_library.js                # function bye(text) { console.log(text) }
        └── hello_library.js                  # function hi(text) { console.log(text) }
// app/assets/config/manifest.js

//= link do_not_name_me_application.js
# config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("vendor/javascripts")
// app/assets/javascripts/do_not_name_me_application.js

//= require_directory ../../../vendor/javascripts

hi("loaded non module");
bye("also loaded");
# app/views/layouts/application.html.erb

<%= javascript_include_tag "do_not_name_me_application" %>

テスト:

>> require "open-uri"
>> puts URI.open("http://localhost:3000/assets/do_not_name_me_application.js").read
function bye(text) { console.log(text) };
function hi(text) { console.log(text) };

hi("loaded non module");
bye("also loaded");

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://github.com/rails/sprockets#directives