Viteでモダンフロントエンド開発環境を構築してみる

Vite【公式】

Viteと呼ばれるフロントエンドのビルドツールが、シンプルかつ動作も早いという噂を聞いたので一度試してみる。公式でも次世代フロントエンドツールを名乗っていて、TypeScript、JSX、CSSあたりを使用するフロントエンドの環境構築がすぐ使えるらしい。これから色々試作プログラム作りたいと思っていたので、今回楽そうなら今後も使っていこうと思う。

Vite

Get Started

基本的には公式サイトのGet Startedの手順で試してみる。公式も日本語対応しているので非常に分かりやすい。サポートされているテンプレートはvanila,vue,reactなど。

プロジェクト生成

非常にシンプル、１行

$ yarn create vite

をターミナルに打ち込むだけ。 質問形式でプロジェクト名やフレームワークを聞かれるので、それぞれtest-vite,vue,vue-tsを選択する。

すると数秒でVue+TypeScript環境を構築してくれる。 ディレクトリを移動し、$yarn $yarn devでlocalhost3000でサイトを確認できる。ホットリロードも効いているみたいなので開発しやすそう。

ディレクトリ構造は基本的なVueテンプレートと同じ感じ。

cahrt.jsの導入を試してみる

後々、グラフを扱うサイトを作成したいなと思っていたのでchart.jsとvue-chart-3を導入して動きを試してみる。

$ yarn add chart.js vue-chart-3

とりあえず、サンプルをappにぶっ込んでみたら稼働することがわかったので今回はここまで。

※プロジェクト生成にはnode12.2.0以上のバージョンが必要、エラーが出たらその都度バージョンを上げて試す