Zenn
Open8

Vite を学びたい

Vite
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

このスクラップについて

TanStack Start について調べていて Vite が使われていることを知った。

https://tanstack.com/start

これまでも Vite について耳にすることが多かったがそろそろちゃんと学んでみようという気になってきたので公式ドキュメントを読んで学んでいこう。

このスクラップでは学んでいく過程を記録していく。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

プロジェクトの作成

まずはオプションを確認してみる。

コマンド
npm create vite@latest -- -h
コンソール出力
Usage: create-vite [OPTION]... [DIRECTORY]

Create a new Vite project in JavaScript or TypeScript.
With no arguments, start the CLI in interactive mode.

Options:
  -t, --template NAME        use a specific template

Available templates:
vanilla-ts     vanilla
vue-ts         vue
react-ts       react
react-swc-ts   react-swc
preact-ts      preact
lit-ts         lit
svelte-ts      svelte
solid-ts       solid
qwik-ts        qwik

続いて実行する。

コマンド
npm create vite@latest -- --template react-ts vite-getting-started
コンソール出力
Scaffolding project in /Users/susukida/workspace/vite-getting-started...

Done. Now run:

  cd vite-getting-started
  npm install
  npm run dev
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

中身を見てみる

コマンド
cd vite-getting-started
tree .
コンソール出力
.
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

4 directories, 15 files
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

コマンドについて

package.json
{
  "scripts": {
    "dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`
    "build": "vite build", // プロダクション用にビルド
    "preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
  }
}