• viteとは？
• インストール

• プロジェクトを作成してみる

  • ディレクトリ構成
  • 本番用にビルドする
• まとめ

viteとは？

Vue CLIやWebpackと比べ高速に動作するビルドツール。

• vitejs/vite: Native-ESM powered web dev build tool. It’s fast.

  • vite

特徴として

• バンドル処理がないため、起動が非常に高速
• 実際にインポートされたコードのみがコンパイルされ、開発を開始するためにアプリ全体がバンドルされるまで待つ必要がない
• HMRのパフォーマンスは、モジュールの総数から切り離されているのでアプリのサイズに関係なく、HMRが一貫して高速

Vue CLIと違って初期化時にライブラリの選択し構築することは出来ないのでセットアップ後、自身で構築する必要がある

また、viteではVue.js V3他にReact, Rreactの作成も可能(※作成方法は以下に記載)

Note to Vue users: Vite currently only works with Vue 3.x. This also means you can’t use libraries that are not yet compatible with Vue 3.

とあるので、vue3に対応していないライブラリは使用できないので注意!

インストール

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install (or yarn install)
$ npm run dev (or yarn dev)

With TypeScriptの場合

$ npm init vite-app <project-name> --template vue-ts

Reactの場合

$ npm init vite-app <project-name> --template react

そのほかtemplate

vitejs/create-vite-app: Create a Vite-powered app in seconds!

プロジェクトを作成してみる

プロジェクト名をvite-sampleとして作成

$ npm init vite-app vite-sample
...(省略)
Done. Now run:

  cd vite-sample
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

$ cd vite-sample
$ npm install
...(省略)
$ npm run dev //起動

ディレクトリ構成

とてもシンプルな構成

.
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

4 directories, 10 files

本番用にビルドする

以下コマンドでビルドする

$ npm run build

ビルド完了するとdistディレクトリにファイルが生成される

まとめ

早いと言っているだけあって、かなり高速で起動する！ 軽量で始める、小規模プロジェクトであればviteは良い感じだ。