webpackerからwebpackへ。
概要・背景
- Railsでwebpackerから後継Gemに移行する作業が発生。
- これまでほぼフロントを触らずに開発してきたので、webpackeへの移行までの作業をメモ。
- 基本はGitLabに技術検証用のリポジトリを作って一人レビューしています。
作業
最初に、Railsでwebpackerが動く環境を作る。
ポイント
- rails7系を使用
- webpackerを動かすために色々処理が必要
- nodeの最新バージョンをDockerfileにご指名してインストール。
- yarnを使ってnodeパッケージを一新。
- gemも最新に一新。
- DBは検証用なのでSQLite。
まずはwebpackerを引き剥がす
https://gitlab.com/share292508/rails-webpacker-removing/-/merge_requests/1
ポイント
- いかに元のディレクトリ構成を引き継げるか。
- webpackで置換できるか。
webpackを監視設定
https://gitlab.com/share292508/rails-webpacker-removing/-/merge_requests/3
ポイント
- 一度だけポイントでビルドするコマンドと自動検知コマンドを分けた。（検証用に）
- –watchオプションでファイル変更を検知して自動ビルド。
typescriptをコンパイルしてみる
https://gitlab.com/share292508/rails-webpacker-removing/-/merge_requests/2
ポイント
- エントリポイントとしてtypescriptファイルを指定できる。
- 出力ファイルは１つに集約した方が管理しやすい。
- そのためにエントリポイントで他のエントリポイント内のファイルをimportしてあげる。
- scss,sass,css,js,ts全てローダーを揃えれば組み合わせ自由で処理できる。
webpack-dev-serverでホットリロードを実現
実装中
課題
ホットリロード時のエラーを解消できない
[webpack-dev-middleware]
HookWebpackError: HMR is not implemented for module chunk format yet作業を終えて
馴染みのないフロントエンド系の技術ということで、何も知らずにガイドに沿って作業をしていたら膨大に時間を無駄にしてしまいました。
馴染みのない技術の場合は、丸1日かけてでも最初に概要を学んで検証用リポジトリで色々試してみるべきでした。
そうすれば、作業の中で出てくるコマンドやコードの意味が理解できて、説明もできる、だから応用できるようになる。
それと、こんな感じで自分の言葉で記事にするのは大事。
理解度がぐんと上がって応用力に繋がる。
でもやっぱり一番は、サクッと作って柔軟に対応できる使い捨ての仮想環境があることかな。
Dockerで仮装環境を作れないと、環境を作るだけで数日かかることもありそうだからね。。。