はじめに
ちょっと前に話題になっていた Vite について、どのようなものなのか調べつつまとめてみました。
どのようなものなのか
従来のビルドツール(Vue CLI等)に比べて、高速で動作するビルドツールのようです。
公式サイトは下記。
https://vitejs.dev/
Vue.js を開発されたEvan You氏が開発されました。
リポジトリは下記。(2021/01/18段階では v2.0.0-beta.30 )
https://github.com/vitejs/vite
Vue.js の他、 React Preact のビルドもサポートしているようです。
- 開発時はバンドルが不要なので、開発サーバーの起動が早い。
- HMR(Hot Module Replacement)(画面の再描画なしに変更を適用してくれる機能)が、修正分のみを適応するため、
モジュールの総数に関係なくかなり高速。
といった利点があるようです。
この辺りは下記ドキュメントにより詳細に書いてあります。
https://vitejs.dev/guide/features.html
導入はどのように行うのか
下記に手順があるので、そちらで行うことができそうです。
https://vitejs.dev/guide/
まず、下記コマンドを実行します。
yarn create @vitejs/app
- (ここではプロジェクト名に
vite-projectを指定しています。)
% yarn create @vitejs/app
yarn create v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "@vitejs/create-app@1.2.0" with binaries:
- create-app
- cva
✔ Project name: · vite-project
Scaffolding project in /Users/hogehoge/workspace/vite/vite-project...
✔ Select a template: · vue-ts
Done. Now run:
cd vite-project
npm install (or `yarn`)
npm run dev (or `yarn dev`)
✨ Done in 66.19s.
手順に沿って、下記を順に行なっていきます。
cd vite-project
npm install (or `yarn`)
npm run dev (or `yarn dev`)
- モジュールのインストール
% yarn
yarn install v1.22.4
warning package.json: No license field
info No lockfile found.
warning vite-project@0.0.0: No license field
[1/4] 🔍 Resolving packages...
warning vite > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
warning vite > rollup > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 18.80s.
- サーバーの立ち上げ
% yarn dev
Vite dev server running at:
> Local: http://localhost:3000/
> Network: http://XX.XXX.XXX.XX:3000/
> Network: http://XX.XXX.XXX.XX:3000/
ready in 1319ms.
毎度お馴染みの http://localhost:3000/ にアクセスすると、下記が表示されます。
その他情報
-
Typescriptのサポートも行っているようですが、型チェックは行ってくれないようです。 - 内部のトランスパイルには、 esbuild を使用しているそう。
この辺りの情報も公式に載っているので、ご興味のある方は是非。
https://vitejs.dev/guide/features.html#npm-dependency-resolving
終わりに
チュートリアルで行ったようなプロジェクトでは、モジュール数も少ないため速度的にはわかりませんでしたが、
実プロジェクトで用いた時にどのような速度が出るかが気になるところです。
開発環境のサーバー起動、ビルド時間で悩みを抱えている方には、有益なツールなのではないでしょうか。
開発されているのがEvan You氏とのことで、今後の発展が楽しみなツールです。