Viteはじめに
概要
Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。2 つの主要な部分で構成されています:
非常に高速な Hot Module Replacement (HMR) など、ネイティブ ES モジュールを利用した豊富な機能拡張を提供する開発サーバ。
Rollup でコードをバンドルするビルドコマンド。プロダクション用に高度に最適化された静的アセットを出力するように事前に設定されています。
Vite はすぐに使える実用的なデフォルトが付属していて、プロジェクト生成された構成のままで使えるように設計されていますが、完全な型サポートのある Plugin API と JavaScript API によって高い拡張性もあります。
プロジェクトの背景にある基本原理について、なぜ Vite なのか セクションで詳しく知ることができます。
ブラウザ対応
デフォルトのビルドは ネイティブ ES モジュール、ネイティブ ESM のダイナミックインポート、iに対応しているブラウザが対象です。レガシーブラウザは公式の @vitejs/plugin-legacy でサポートされています。詳細は 本番環境用のビルド セクションをご覧ください。
Vite をオンラインで試す
StackBlitz で Vite をオンラインで試すことができます。Vite ベースのビルドセットアップをブラウザ上で直接実行するので、ローカルセットアップとほぼ同じですが、マシンに何もインストールする必要がありません。vite.new/{template} に移動して、使用するフレームワークを選択できます。
サポートされているテンプレートのプリセットは次のとおりです:
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
最初の Vite プロジェクトを生成する
互換性について
Vite は Node.js 14.18+、16+ のバージョンが必要です。ただし、一部のテンプレートではそれ以上のバージョンの Node.js を必要としますので、パッケージマネージャが警告を出した場合はアップグレードしてください。
NPM を使う場合:
$ npm create vite@latest
Yarn を使う場合:
$ yarn create vite
PNPM を使う場合:
$ pnpm create vite
あとは画面表示に従ってください！
プロジェクト名や使用するテンプレートは、追加のコマンドラインオプションによって直接指定することもできます。例えば Vite + Vue のプロジェクトを生成するには以下のコマンドを実行します:
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+ は追加で 2 つのダッシュが必要:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
サポートされている各テンプレートの詳細は create-vite を参照してください: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.
コミュニティのテンプレート
create-vite はよく使われているフレームワークの基本的なテンプレートを元に、プロジェクトをすばやく開始するためのツールです。他のツールを含んでいたり、別のフレームワークを対象としている、コミュニティが管理しているテンプレートについては Awesome Vite をチェックしてみてください。degit のようなツールを使って、これらのテンプレートからプロジェクトを生成できます。
npx degit user/project my-project
cd my-project
npm install
npm run dev
テンプレートのプロジェクトがデフォルトブランチとして main を使っている場合は、プロジェクトリポジトリの末尾に #main をつけてください。
npx degit user/project#main my-project
index.html とプロジェクトルート
お気づきかもしれませんが、Vite プロジェクトでは index.html は public 内に隠れているのではなく、最も目立つ場所にあります。これは意図的なものです。開発中、Vite はサーバで、index.html はアプリケーションのエントリポイントです。
Vite は index.html をソースコードとして、またモジュールグラフの一部として扱います。JavaScript のソースコードを参照している <script type="module" src="..."> を解決します。インラインの <script type="module"> や <link href> で参照される CSS も Vite 固有の機能を利用できます。さらに、index.html 内の URL は自動的にリベースされるため、特別な %PUBLIC_URL% プレースホルダは必要ありません。
静的な http サーバと同様に、Vite には、ファイルの提供元となる「ルートディレクトリ」の概念があります。ドキュメントの残りの部分では <root> として示されています。ソースコード内の絶対 URL は、プロジェクトルートをベースとして使って解決されるため、通常の静的ファイルサーバを使用しているかのようにコードを記述できます（遥かに強力であることを除いては！）。Vite はルート外のファイルシステムの場所に解決される依存関係を処理することもできるため、モノレポベースの構成でも使用できます。
Vite は複数の .html エントリポイントを持つマルチページアプリにも対応しています。
代替ルートの指定
vite を実行すると、現在の作業ディレクトリをルートとして使用する開発サーバが起動します。vite serve some/sub/dir で代替ルートを指定できます。
コマンドラインインタフェイス
Vite がインストールされているプロジェクトでは npm スクリプトで vite バイナリを使用したり、npx vite で直接実行できます。生成された Vite プロジェクトのデフォルトの npm スクリプトは次のとおりです:
{
"scripts": {
"dev": "vite", // 開発サーバを起動。エイリアス: `vite dev`, `vite serve`
"build": "vite build", // プロダクション用にビルド
"preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
}
}
--port や --https のような追加の CLI オプションを指定できます。すべての CLI オプションのリストは、プロジェクト内で npx vite --help を実行してください。
コマンドラインインターフェイスについて詳しくはこちら。
未リリースのコミットの使用
最新機能を試すために新しいリリースを待つことができない場合は、ローカルマシンに vite repo をクローンしてから自分でビルドとリンクをする必要があります（pnpm が必要）:
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # このステップでは好きなパッケージマネージャを使用
その後 Vite ベースのプロジェクトに移動し、pnpm link --global vite（または、vite をグローバルにリンクするために使用したパッケージマネージャ）を実行してください。そして開発サーバを再起動して最先端の技術に乗っていきましょう！
コミュニティ
質問がある場合やサポートが必要な場合は、Discord や GitHub Discussions でコミュニティに連絡してください。