5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Rails】importmap-railsの注意点

Last updated at Posted at 2022-08-01

初めに

Rails7 では、importmap-railsが標準で利用できるようになりました。

webpackerjsbuilding-railsなどと違い、javascript モジュールをブラウザに直接インポートされます。

importmap-railsは他と違い注意しないといけない点があるので、忘備録として記事にしておきます。

注意点

パッケージの追加の仕方

importmapは javascript パッケージを追加するためには、以下のようにします。

$ bin/importmap pin [パッケージ名]
Pinning [パッケージ名] to [パッケージURL]

といった形で、パッケージを追加していきます。
importmapで利用できるのは npm から取得できるパッケージ JavaScript CDN 経由で利用できるものだけです。

JSX は利用できない

webpackのようにコンパイルなどを行わなず、ブラウザに直接インポートされます。
なので、JSXのような明示的なトランスパイルやコンパイルのステップが必要である場合はimportmap-railsでは利用できない。

パッケージのアップデート

npm updateなどのようにパッケージをまとめてアップデートできませんが、下記のようなコマンドを使うことで新しいバージョンが存在するかを確認できます。

$ ./bin/importmap outdated
新しいバージョンのnpmレジストリをチェックします

$ ./bin/importmap audit
既知のセキュリティ問題についてnpmレジストリをチェックします

パッケージをローカルにインストールする

--downloadオブションを指定することで、パッケージをローカルにインストールできます。

bin/importmap pin [パッケージ名] --download

vender/javascriptディレクトリにインストールされる。

参考

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?