グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



VueとReactのプロジェクトをHMR(ホットリロード)が爆速と噂の「Vite」を使って構築してみる

Vite(ヴィート)はVue.jsの作者のEvan You氏が開発した次世代フロントエンドツーリングです。
公式では以下のように説明してます。

以下、Google翻訳

On demand file serving over native ESM, no bundling required!
ネイティブESMを介して提供されるオンデマンドファイル。バンドルは必要ありません。
Hot Module Replacement (HMR) that stays fast regardless of app size.
アプリのサイズに関係なく高速を維持するホットモジュール交換(HMR)
Out-of-the-box support for TypeScript, JSX, CSS and more.
TypeScript、JSX、CSSなどのすぐに使えるサポート。
Pre-configured Rollup build with multi-page and library mode support.
マルチページおよびライブラリモードをサポートする事前構成済みのRollupビルド。
Flexible programmatic APIs with full TypeScript typing.
完全なTypeScriptタイピングを備えた柔軟なプログラマティックAPI。
vitejs.devより

今回はViteを使ってVueとReactのプロジェクトをそれぞれ構築してみたいと思います。

使用環境
  • Docker desktop for Windows: 3.4.0 (65384)
  • docker: 20.10.5
  • docker-compose: 1.29.0, build 07737305
  • Node: 16.0.3 (Docker image: node:16.3.0-alpine3.12)

Vue + TypeScriptプロジェクトの作成

docker-compose.ymlの用意

docker-compose.yml

Vite公式のscaffoldを使ってVue + TypeScriptプロジェクトを作成

※直下にファイルがあると以下の確認プロンプトが表示されるので、一時ディレクトリを作成後にプロジェクト直下にファイル一式を移動する形にしています。

依存パッケージのインストール

Viteのdevサーバの起動

devサーバが立ち上がるまでの時間が394msと爆速です。

最終的なディレクトリツリーは以下の通りです。

React + TypeScriptプロジェクトの作成

docker-compose.ymlの用意

docker-compose.yml

Vite公式のscaffoldを使ってReact + TypeScriptプロジェクトを作成

※直下にファイルがあると以下の確認プロンプトが表示されるので、一時ディレクトリを作成後にプロジェクト直下にファイル一式を移動する形にしています。

依存パッケージのインストール

Viteのdevサーバの起動

devサーバが立ち上がるまでの時間が243msと爆速です。

最終的なディレクトリツリーは以下の通りです。

Build

Scaffoldで作成した package.json にBuild用のnpm scriptsが定義済みです。

package.json

実際には開発、ステージング、本番の環境毎に設定値を環境変数で分けると思います。

環境毎の.envファイルを定義しておいて –mode オプションで指定します。
よく使うコマンドはnpm scriptsとして定義しておくとよいでしょう。

※Vueの場合は  tsc  vue-tsc  になります

Tips

devサーバをHTTPSで立ち上げる

ViteのdevサーバでHTTPSで立ち上げるオプションが提供されています。

GeoLocationなどのHTTPSが必要なAPI依存のアプリケーションではデフォルトで提供されていると助かりますね。

まとめ

簡単ですがViteを使ったVueとReactのプロジェクト作成は以上です。

Vite公式がScaffoldを提供してくれているおかげでプロジェクトの初回構築も爆速です。
ただしtscによるコンパイルはdevサーバのHMRでは省略されているので注意が必要です。適宜エディタの機能やCIで補完しましょう。

これから新規プロジェクトを作成される方は、Viteの導入を検討されてみてはいかがでしょうか。

The following two tabs change content below.

美髭公

ソリューション事業部 システムエンジニア
2013年にアーティスに入社。システムエンジニアとしてアーティスCMSを使用したWebサイトや受託システムの構築・保守に携わる。環境構築が好き。
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします