Rails7 환경에서 npm package 사용

importmap이 적용된 Rails에서 npm package를 사용하는 절차를 담은 노트다.
이번에는 typewriterjs라는 프로그램 라이브러리에 넣으려고 합니다.
shell

$ ./bin/importmap pin typewriter-effect

Pinning "typewriter-effect" to https://ga.jspm.io/npm:[email protected]/dist/react.js
Pinning "object-assign" to https://ga.jspm.io/npm:[email protected]/index.js
Pinning "process" to https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js
Pinning "react" to https://ga.jspm.io/npm:[email protected]/index.js

명령을 입력하면config/importmap.rb 컨텐트가 반영됩니다.이 문건은 package-lock.json와yarn.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:[email protected]/dist/react.js'
pin 'object-assign', to: 'https://ga.jspm.io/npm:[email protected]/index.js'
pin 'process', to: 'https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js'
pin 'react', to: 'https://ga.jspm.io/npm:[email protected]/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:[email protected]/dist/core.js'
pin 'object-assign', to: 'https://ga.jspm.io/npm:[email protected]/index.js'
pin 'process', to: 'https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js'

stimulus js 파일에 추가
home_controller.js

import { Controller } from "@hotwired/stimulus"
import Typewriter from "typewriter-effect"

export default class extends Controller {
  static targets = ["typewriter"]

  connect() {
    let target = this.typewriterTarget;
    if (target) {
      let customNodeCreator = (character) => {
        // Add character to input placeholder
        target.placeholder = target.placeholder + character;

        // Return null to skip internal adding of dom node
        return null;
      }

      let onRemoveNode = () => {
        if (target.placeholder) {
          // Remove last character from input placeholder
          target.placeholder = target.placeholder.slice(0, -1)
        }
      }

      new Typewriter(null, {
        strings: ['Hello', 'World'],
        autoStart: true,
        loop: true,
        delay: 75,
        onCreateTextNode: customNodeCreator,
        onRemoveNode: onRemoveNode,
      });
    }
  }
}

HTML에 대응하는 기술을 하다.

<div data-controller="home">
  <div data-home-target="typewriter"></div>
</div>

동작 확인

기분 좋네.
importmap-rails를 사용하면 브라우저에서javascript 모듈을 직접 가져올 수 있으며, 예를 들어 Webpack,yarn,npm 등 일부 도구 체인이 필요하지 않습니다.
생성된 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:[email protected]/dist/core.js",
    "object-assign": "https://ga.jspm.io/npm:[email protected]/index.js",
    "process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js",
    "controllers/root_header_controller": "/assets/controllers/home_controller-98ecd9c0511b83ff28a337338c5276d34662561fc5e22011b8b81d26a975594a.js"
  }
}</script>

참고 자료

이 기사는 동영상에서 DHH가 설명하는 단계를 참조합니다.