Vite + React + Typescript 環境構築おためし

概要

viteはwebpackの欠点を解消するように作られたビルドツール。
最近巷でよく聞くので、本家のサイトを参考にしてビルドをやってみようと思う。

参考

環境

今の環境はこんなかんじ。

• OS
  • MX 21.3 Wildflower (64bit)
• CPU
  • Intel(R) Core(TM) i3-2350M CPU @ 2.30GHz
• RAM
  • 4G
• nvm
  • version 0.35.0
• node
  • version 20.11.1

やけにスペックが低いのは古くなった大学生協PCにOS入れなおして使ってるから…
nvmはnodeのバージョン管理では必須級なのでいれてる。viteを使うときのnodeのバージョンはなんでもいいわけではないそうなので、構築するとき逐一公式サイトは確認しておいたほうがいいかもしれない。
今回は上のバージョンでは問題なかった。

プロジェクトの作成

ひとまずnpmでやってみよう。
eslintみたいに選択肢が表示されるので、それに従って入力するようだ。

$ npm create vite@latest
✔ Project name: … sample-vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /home/yoshi623/ws/sample-vite-project...

Done. Now run:

  cd sample-vite-project
  npm install
  npm run dev

一番使い慣れてる、React+Typescriptでやってみた。
SWCというのはRust製のツールだそうで。全然知らないけど、ビルドが速くなりそうなので入れてみた。

上で選択肢を選んでいったけど、下記のように短縮することもできるらしい。
なぜか--templeteの前に--が要るようだ。

$ npm create vite@latest sample-vite-project -- --templete react-swc-ts

ビルド実行

cd sample-vite-project
npm install
npm run dev

npm installはさすがに時間がかかるっぽいけど、run devはめっちゃ早い気がする。
npm startでサーバが起動するのに数秒ぐらいかかっていたと思うけど、viteはすぐに起動したようだ。
ローカルにサーバが立ったので確認しにいくとこうなった。

おしまい。