はじめに
OJTで参画していた現場の正式参画が決まりました。
体調が芳しくなく、プライベートでは現場技術のRailsとReact等については勉強できずにおりました。 さて、今回は社内活動でも、業務でも、個人開発でも使用するReactに触れる回としたいと思います。
内容
既存プロジェクトの一部でReactを使用する場合、ReactベースのフレームワークでReact部分のビルドが必要となる。
バッグエンドとの統合には、Viteが必要な模様。
事前知識
「Viteが具体的に何をするのか」を理解するのに、今まで曖昧にしていたJavaScriptの環境周りの整理したい。
1.CommonJSとは？UMDとは？ES Modulesとは？
とても良い記事
を見つけたので参照。
2.bare importとは
モジュール名だけの使用でimportするインポート構文。
Viteプロジェクトの作成
Viteのガイド参照。
TypeScript＋SWCを使用。
1.該当のプロジェクトのディレクトリに移動
2.npm installおよびnpm run devにて、起動
無事に起動ができました。
SpringBootプロジェクトに統合する（編集予定）
Viteプロジェクトにて、npm run buildをすると下記のようなディレクトリが生成される
root
┗ dist
┣━ .vite
┣━ assets
┗━ vite.svg
あとは静的アセットをSpringBootプロジェクトのstatic配下に置くなりすれば動作はする。
参考：
