目次
vite とは？
Vue CLI や Webpack と比べ高速に動作するビルドツール。
特徴として
- バンドル処理がないため、起動が非常に高速
- 実際にインポートされたコードのみがコンパイルされ、開発を開始するためにアプリ全体がバンドルされるまで待つ必要がない
- 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 は良い感じだ。
