タイトルのとおりなんだけれども...。
ejectしていないcreate-react-app製のアプリケーションで音声を鳴らしたくなって、調べたり聞いたことのメモ書き。 (というか、ほぼ5t111111さんに教えていただいたことを貼っているだけである...)
思考の変遷
- あれ...音声を鳴らすためのmp3って普通にsrc/assets/に置いたうえで、importできるんだっけ...？
- Webpackのbuild対象にするには、それ用のloaderが必要...？
- ejectしていないアプリケーションってことはwebpack.config.jsを直接触れないけど、普通にaudioファイル扱える...？
- とりあえずimport書いてみたけどエラー出てimportできないっぽいな
- 雑にググったら「まずejectしよう」みたいな記事出てくるんだけど...？(若干古い記事が多い)
- うーんでも、ここ見るとloadできそうなんだけどなぁ...。↓
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
- とかTwitterに書いてたら「普通に動く」っていう情報をいただいた
ちょっと気になったので試してみたら普通に動くようでしたよ。こういうことではない？ pic.twitter.com/WGc6L94oV5
— WAKASUGI 5T111111 (@5t111111) 2021年4月4日
- いただいたキャプチャを見てみると、global.d.tsで
declare module "*.mp3";としていることに気がついて、それについて聞いてみたことへの答え↓
そうですね、こういうファイルには型定義がないので、こうやってambient moduleとして型をつけてやるのはよくやると思います！素のTSプロジェクトだと全部自分でやらないと怒られるけど、CRAだと画像とかは既に型情報があるようなので、その辺で混乱しやすいのかもしれませんhttps://t.co/J86GHkbbTp
— WAKASUGI 5T111111 (@5t111111) 2021年4月4日
- ここで、file-loader通したbuildの対象にできてるかっていう話と、moduleのimportができるかという話を混同していてエラーを見ていたことのだとわかった。勉強になった。
というわけで、できた
↑ これは何かというと、会社のチームでモブプロするときにときどき使ってるツール(OSS化されている)「mobu」へのPR。 これまではドライバー交代のタイミングでブラウザのnotificationが出てきたのだけど、結構見落とすことが多いので、交代のときに音が鳴るようにしたかったのだ。 晴れてマージしてもらった。
ここで使えるよ→ https://mobu-waiwai.netlify.app/
ちなみに「mobu」を使ってモブプログラミングするときの話などは、同僚が会社ブログに書いている。
おわりに
たいした話じゃないかなぁって思いつつも...
- "create-react-app mp3" とかでググるとejectしろみたいな記事が出てくるので書いてみた
- global.d.tsの話は自分にとっては知見だったのでメモしておきたかった
という感じでした。
