typescriptからrails ujsを使う

railsでrails-ujs使うなら、requireすれば簡単にできる

application.js

//= require rails-ujs

ただ、typescript + webpack + yarnでフロント管理してる時に、簡単に使えないので、入れ方を調査した

1. add rails-ujs

yarn add rails-ujs

2. moduleの解決方法をnodeに設定

typescriptのmodule解決方法は二つある

• Classic
• Node

デフォルトはClassicになってる、rails-ujsはnodeにしないといけないので、tsconfigに設定追加

tsconfig.json

"moduleResolution": "node",

3. importする

application.ts

import Rails from "rails-ujs";

window.onload = () => {
  Rails.start();
};

nodeにする場合、importはどう動いてるか

ここに詳しく説明してる https://www.typescriptlang.org/docs/handbook/module-resolution.html#node

今回のケースでは

application.ts

import Rails from "rails-ujs";

1. node_modules/rails-ujsのを探す
2. node_modules/rails-ujs/package.json探す

3. package.json中のmain探す

   node_modules/rails-ujs/package.json

   { "main": "lib/assets/compiled/rails-ujs.js" }
   

4. main中で設定したパス node_modules/rails-ujs/lib/assets/compiled/rails-ujs.jsを探す