94
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Viteとは何なのか

Last updated at Posted at 2021-01-18

はじめに

ちょっと前に話題になっていた 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/ にアクセスすると、下記が表示されます。
スクリーンショット 2021-01-18 11.25.10.png

その他情報

  • Typescript のサポートも行っているようですが、型チェックは行ってくれないようです。
  • 内部のトランスパイルには、 esbuild を使用しているそう。
    この辺りの情報も公式に載っているので、ご興味のある方は是非。
    https://vitejs.dev/guide/features.html#npm-dependency-resolving

終わりに

チュートリアルで行ったようなプロジェクトでは、モジュール数も少ないため速度的にはわかりませんでしたが、
実プロジェクトで用いた時にどのような速度が出るかが気になるところです。
開発環境のサーバー起動、ビルド時間で悩みを抱えている方には、有益なツールなのではないでしょうか。
開発されているのがEvan You氏とのことで、今後の発展が楽しみなツールです。

参考にした情報

94
68
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
94
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?