はじめに

概要

Vite(フランス語で「速い」という意味の単語で /vit/ と発音)は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。2 つの主要な部分で構成されています:

Vite はすぐに使える実用的なデフォルトが付属していて、プロジェクト生成された構成のままで使えるように設計されていますが、完全な型サポートのある Plugin APIJavaScript API によって高い拡張性もあります。

プロジェクトの背景にある基本原理について、Why Vite セクションで詳しく知ることができます。

ブラウザ対応

最初の Vite プロジェクトを生成する

互換性について

Vite は Node.js >=12.0.0 のバージョンが必要です。

NPM を使う場合:

$ npm init vite@latest

Yarn を使う場合:

$ yarn create vite

PNPM を使う場合:

$ pnpm dlx create-vite

あとは画面表示に従ってください!

プロジェクト名や使用するテンプレートは、追加のコマンドラインオプションによって直接指定することもできます。例えば Vite + Vue のプロジェクトを生成するには以下のコマンドを実行します:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+ は追加で 2 つのダッシュが必要:
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

サポートされているテンプレートプリセットは以下のとおりです:

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

各テンプレートの詳細は create-vite を参照してください。

コミュニティのテンプレート

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.htmlpublic 内に隠れているのではなく、最も目立つ場所にあります。これは意図的なものです。開発中、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", // 開発サーバを起動
    "build": "vite build", // プロダクション用にビルド
    "serve": "vite preview" // プロダクション用ビルドをローカルでプレビュー
  }
}

--port--https のような追加の CLI オプションを指定できます。すべての CLI オプションのリストは、プロジェクト内で npx vite --help を実行してください。

未リリースのコミットの使用

最新機能を試すために新しいリリースを待つことができない場合は、ローカルマシンに vite repo をクローンしてから自分でビルドとリンクをする必要があります(Yarn 1.x が必要):

git clone https://github.com/vitejs/vite.git
cd vite
yarn
cd packages/vite
yarn build
yarn link

その後 Vite ベースのプロジェクトに移動し、yarn link vite を実行してください。そして開発サーバを再起動(yarn dev)して最先端の技術に乗っていきましょう!

コミュニティ

質問がある場合やサポートが必要な場合は、DiscordGitHub Discussions でコミュニティに連絡してください。