🗺️

Rails7 環境で npm package を使ってみる

4 min read

importmap を採用した Rails で npm package を使う手順のメモです。

今回は typewriterjs というライブラリを入れてみます。

shell
$ ./bin/importmap pin typewriter-effect

Pinning "typewriter-effect" to https://ga.jspm.io/npm:typewriter-effect@2.18.2/dist/react.js
Pinning "object-assign" to https://ga.jspm.io/npm:object-assign@4.1.1/index.js
Pinning "process" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.14/nodelibs/browser/process-production.js
Pinning "react" to https://ga.jspm.io/npm:react@17.0.2/index.js

コマンドを叩くと config/importmap.rb に内容が反映されます。このファイルが package-lock.jsonyarn.lock 相当のものですね。元となる package.json のようなファイルはありません。

config/importmap.rb
# Pin npm packages by running ./bin/importmap

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'

# typewriter-effect
pin 'typewriter-effect', to: 'https://ga.jspm.io/npm:typewriter-effect@2.18.2/dist/react.js'
pin 'object-assign', to: 'https://ga.jspm.io/npm:object-assign@4.1.1/index.js'
pin 'process', to: 'https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.14/nodelibs/browser/process-production.js'
pin 'react', to: 'https://ga.jspm.io/npm:react@17.0.2/index.js'

余談: react は使わないので書き換えました

config/importmap.rb
# Pin npm packages by running ./bin/importmap

pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'

# typewriter-effect
pin 'typewriter-effect', to: 'https://ga.jspm.io/npm:typewriter-effect@2.18.2/dist/core.js'
pin 'object-assign', to: 'https://ga.jspm.io/npm:object-assign@4.1.1/index.js'
pin 'process', to: 'https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.14/nodelibs/browser/process-production.js'

js ファイルに追記

applications.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "./typewriter.js"
typewriter.js
import Typewriter from "typewriter-effect"

new Typewriter('#typewriter', {
  strings: ['Hello', 'World'],
  autoStart: true,
  loop: true,
});

HTML に該当する id を追記

<div id="typewriter"></div>

動作確認

いい感じですね。

importmap-rails を使うことで、 Webpack, yarn, npm などのツールチェーンの一部を必要とせずに、ブラウザから直接 Javascript モジュールをインポートすることができます。

生成された importmap は以下。

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-0038aad79cfa37268282d1d61a7147f29a757d59b7c79e1479f01f7ce16ce9aa.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-305f0d205866ac9fc3667580728220ae0c3b499e5f15df7c4daaeee4d03b5ac1.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-685d40a0b68f785d3cdbab1c0f3575320497462e335c4a63b8de40a355d883c0.js",
    "typewriter-effect": "https://ga.jspm.io/npm:typewriter-effect@2.18.2/dist/core.js",
    "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js",
    "process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.14/nodelibs/browser/process-production.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "controllers/root_header_controller": "/assets/controllers/root_header_controller-98ecd9c0511b83ff28a337338c5276d34662561fc5e22011b8b81d26a975594a.js"
  }
}</script>

参考

本記事は DHH が動画で紹介していた手順を参考にしたものです。

https://www.youtube.com/watch?v=mpWFrUwAN88&t=687s

Discussion

ログインするとコメントできます